Form button hover effect possible?

[gorilla1]

If I want my form button to change colors on hover, why does the following not do the trick?:
<style>
.buttons {
font-family: Verdana, Arial, Helvetica;
background: #ffffff;
border: none;
color: #339900;}

.buttons A {
color: #000000;
}

.buttons A:hover {
color: #000000;
}
</style>

<INPUT TYPE=button class="buttons" name="Next" VALUE="->" onClick="doSomething"><BR>

G

[Mr J]

Have a play with this.


<form name=magic>
<INPUT TYPE=button name="but" value="Magic button mouse me and see"
onmouseover="document.magic.but.style.backgroundColor='#00AA00',width='290',height='100';
document.magic.but.value='You Can Change The text'"
onmousedown="document.magic.but.style.backgroundColor='FFFF00';
document.magic.but.value='As Easy As The Colour and Size'"
onmouseup="document.magic.but.style.backgroundColor='#FF0000';
document.magic.but.value='Just like this example'"
onmouseout="document.magic.but.style.backgroundColor='#0000FF',height='24';
document.magic.but.value='Coloured button Without Script'">
</form>


More information at:

www.huntingground.freeserve.co.uk/webplus/buttons/buttons.htm

[gorilla1]

Very nice. Thanks, Mr J.

G

[gorilla1]

I still wonder, though, can it be done with a hover class, so that one can code once in the style sheet and avoid a lot of repetitive coding?

G

[Roy Sinclair]

Originally posted by gorilla1
I still wonder, though, can it be done with a hover class, so that one can code once in the style sheet and avoid a lot of repetitive coding?

G

If your target browser it Mozilla or a lesser Gecko based browser like Netscape 6.x then the answer is yes. Otherwise you can pretty well forget doing it with CSS for now because IE doesn't support :hover that well.

[jkd]

Run this in a Gecko-based browser (NS6, NS7 PR, Mozilla, K-meleon, Galeon, and Beonex are among a few):

<style type="text/css">
input[type="button"]:hover {
background: green;
}
</style>

..............

<input type="button" value="hover me!"/>


To see what Roy is talking about. :)

[Mr J]

You could put the script as a .js


<script language="JavaScript">
<!--
function newcol(){
if (event.srcElement.tagName=="INPUT")
event.srcElement.style.backgroundColor="green"
}

function newcol2(){
if (event.srcElement.tagName=="INPUT")
event.srcElement.style.backgroundColor="#c0c0c0"
}
//-->
</script>


<form onMouseover="newcol()" onMouseout="newcol2()">
<input type="button" value="Click Me!">
<input type="button" value="Click Me!">
</form>

[vw98034]

The previous script is nice only if there is only one type of input field - button. If there is another type of input field, say a text field, the script may have an undesired side impact.

[me']

See selector:hover in IE (http://annevankesteren.nl/archives/2004/01/selectorhover-in-internet-explorer).