I would like to have a button im my form where it changes colors on mouseover. Please advise how I can do this?
<style>
myButton{
hover-color: blue;
}
</style>
<form>
<input type="text" value="dathere">
<input type="submit" value="submit" class="myButton">
</form>This :
.myButton:hover {background-color:blue;}
is good for good browsers. To make it work in IE you need some javascript. One way to do it is explained here. (<!-- m --><a class="postlink" href="http://www.xs4all.nl/~peterned/csshover.html">http://www.xs4all.nl/~peterned/csshover.html</a><!-- m -->)Unfortunately, most browsers only support the CSS ":hover" pseudo-class for <a> objects. You could use CSS to make a <a> link that looks like a button, then add some Javascript to make it act like a button, but then you'd be losing the 10% or so of users who don't have Javascript available/enabled.
The format if the hover pseudo-class were supported would be:
...
<style type=text/css>
.myButton:hover {
color: blue;
}
</style>
</head>
<body>
...
<input type=submit class=myButton value="submit">
...Thanks,
I assume it would be easier to do it with an image.
Any suggestions on where I can grab an image and how it is done?I think it's this:
.myButton:hover {background-image:url(button.gif);}
But you still can't use it for IE, you'll have to implement a workaround using some sort of scripting.www.vladdy.net/Demos/submitstyling.html
- shows better technique as far as background image goes
- also contains a simpler .htc (which requires additional definitions in CSS)thanks
<style>
myButton{
hover-color: blue;
}
</style>
<form>
<input type="text" value="dathere">
<input type="submit" value="submit" class="myButton">
</form>This :
.myButton:hover {background-color:blue;}
is good for good browsers. To make it work in IE you need some javascript. One way to do it is explained here. (<!-- m --><a class="postlink" href="http://www.xs4all.nl/~peterned/csshover.html">http://www.xs4all.nl/~peterned/csshover.html</a><!-- m -->)Unfortunately, most browsers only support the CSS ":hover" pseudo-class for <a> objects. You could use CSS to make a <a> link that looks like a button, then add some Javascript to make it act like a button, but then you'd be losing the 10% or so of users who don't have Javascript available/enabled.
The format if the hover pseudo-class were supported would be:
...
<style type=text/css>
.myButton:hover {
color: blue;
}
</style>
</head>
<body>
...
<input type=submit class=myButton value="submit">
...Thanks,
I assume it would be easier to do it with an image.
Any suggestions on where I can grab an image and how it is done?I think it's this:
.myButton:hover {background-image:url(button.gif);}
But you still can't use it for IE, you'll have to implement a workaround using some sort of scripting.www.vladdy.net/Demos/submitstyling.html
- shows better technique as far as background image goes
- also contains a simpler .htc (which requires additional definitions in CSS)thanks