PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

CSS Button en Submit

Door - SanThe - op 15-09-2008 14:33
2.686 views
Hallo Phphulpers,

Ik heb een <input type="button" (of submit) />. Kleurtje geven gaat prima. Ook hover gaat prima, maar niet in Internet Explorer. Weet iemand hoe het ook in IE werkend te krijgen is?

SanThe.
- SanThe -
19-09-2008 13:30
Helaas ook dat werkt niet.
Maar laat maar. Ik ga daar verder geen tijd in stoppen.
Dan doet Billy Gates het maar zonder.

Edit: Dit was niet tegen jou Niek.
Ik reageerde nog op het topic ervoor.

Allen bedankt. Ik heb er genoeg tijd aan besteed/verloren.
- SanThe -
19-09-2008 13:57
@Robert_Deiman: Nogmaals bedankt. Die van jou werkt inderdaad wel. Ik heb de bron even opgeslagen en zal er zeker nog naar gaan kijken. Ik ben het nu echter even zat en ga gewoon weer verder met waar ik mee bezig was. Maar ik kijk er zeker naar. (Anders kan ik niet slapen) ;-)

SanThe.

Edit: Ik kon het niet laten. ;-)

De validator zegt:

Sorry! We vonden de volgende fouten (1)
URI : http://www.test.santhe.nl/scriptchecker/css/general.css
186 body Eigenschap behavior bestaat niet : url(csshover.htc)
R
Robert Deiman
19-09-2008 16:04
Dat klopt, daarvan ben ik wel op de hoogte, helaas is dat zo, maar ik gebruik die behavior ook alleen maar bij conditional comments voor IE6 en lager. Dan valideert die wel prima, en heb je daar geen last van. Dit is een van de weinige IE hacks die ik nog wel eens toe wil passen, omdat je dan inderdaad wel overal een hover actie aan kan hangen.
Gerben Jacobs
19-09-2008 16:41
Niek schreef op 19.09.2008 13:19
Ik gebruik altijd jQuery.
Zet in je css ook een class erbij, zoals het volgende

button:hover,
button.hover
{
    background-color    : yellow;
    color                : red;
}

Met jQuery regel je dan dat er een class moet worden toegevoegd wanneer je over het element gaat 

$("button").hover(
  function()
  {
    $(this).addClass("hover");
  },
  function()
  {
    $(this).removeClass("hover");
  }
);



De tweede function() betekent als je er niet meer over heen hovert in jQuery? Handig om te weten!
O
Onbekend Onbekend
19-09-2008 19:19
Mitchell schreef op 19.09.2008 12:20
:hover werkt in IE alleen op een hyperlink.

Ik denk dat je javascript zal moeten gebruiken als je perse een hover wilt hebben.


Grappig is dat, hoe maak ik dan een CSS only mouseover menu? En het werkt 100% in IE!
?
Onbekende gebruiker
19-09-2008 19:24
Kijk een op deze website.
Gegarandeerd dat deze hier wel ergens bij staat
http://www.cssplay.co.uk/
M
Mitchell
19-09-2008 21:15
Tommy schreef op 19.09.2008 19:19
[quote='Mitchell schreef op 19.09.2008 12:20']:hover werkt in IE alleen op een hyperlink.

Ik denk dat je javascript zal moeten gebruiken als je perse een hover wilt hebben.


Grappig is dat, hoe maak ik dan een CSS only mouseover menu? En het werkt 100% in IE![/quote]Ja, maar daarbij gebruik je a:hover en niet li:hover. Of wel soms? :)
Jan Koehoorn
19-09-2008 22:53
Wat ik in een geval als dit nog wel eens doe is de button in een a tag stoppen. Dan kun je namelijk zoiets doen in je CSS:

	a:link input#submit,
	a:visited input#submit		{color: blue;}
	a:hover input#submit,
	a:active input#submit		{color: red;}

De pseudoclasses voor de a tag werken wel in IE6. Het is een beetje een lapmiddel maar goed.
Getest en werkt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Untitled Document</title>
	<style type="text/css" media="screen">
	a:link input#submit,
	a:visited input#submit		{color: blue;}
	a:hover input#submit,
	a:active input#submit		{color: red;}
	</style>
</head>

<body>
	<form>
		<a href=""><input id="submit" type="submit" value="verzenden" /></a>
	</form>
</body>
</html>
E
Emmanuel Delay
20-09-2008 11:23
Of je gebruikt een image als button. Dan kan je er sowieso van maken wat je wil.

Reageren

Inloggen om te reageren