Changing text colour in a submit button on hover with CSS 2

[fdarkness]

I've tweaked a submit button on my page with a bit of CSS. But is it possible to have the text colour in it change when hovering over it, ideally with an inline style?

<input type="submit" name="submit" style="background-color:#003360; font-size:10pt; color:white; font-family:Arial; font-weight:bold; font-style:italic; cursor:pointer; width:120; border:none" value="+ Add an account" onClick="document.warrantEdit.action='process.asp?Action=AddAccount';">

Thanks in advance!

 

[rjoubert]

Use the onmouseover and onmouseout events of your submit button to change the style accordingly.

 

[Foamcow]

You *could* create a class for the submit button and put your styles in there.

Then use the :hover psuedo class to change the style when it's hovered over. However IE is probably not going to work unless you also whack in some Javascript, so you may as well use Javascript to do the style change.

I would advise taking out the inline style and creating a class or ID rule though.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[fdarkness]

Foamcow: I did try creating a class with hover in it, but it didn't work for some strange reason. Is it because IE is a right bugger and won't work with it?

As for putting in JavaScript, it's not that important that I need to implement it. I just wanted the button, which looks similar to the links on the page, to change on a hover for consistency. Ultimately, if I can't get it to go easily, I'll just leave it and people can deal.

 

[Foamcow]

IE only supports the :hover psuedo class on <a> elements.

A right pain. But it can normally be got around with a small piece of Javascript (at least until IE supports :hover)

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[kaht]

here's an example, it's pretty easy to implement:

<style type="text/css">

input.out {
   border:1px solid purple;
   color:purple;
   background-color:yellow;
}

input.over {
   border:1px solid yellow;
   color:yellow;
   background-color:purple;
}

</style>
<script type="text/javascript">

function over(obj, bool) {
   obj.className = (bool) ? "over" : "out";
}

</script>
<input type="button" value="hover over me" onmouseover="over(this, true)" onmouseout="over(this, false)" class="out" />

-kaht

[small]How spicy would you like your chang sauce? Oh man... I have no idea what's goin' on right now...[/small]