lkkl
asked on
Adding a 'hover' CSS color effect for text within label tags...
Hello,
I am looking for a 'hover' CSS color effect for text within label tags similar to what one would see for an <a href> link when hovering over the link text. I'd like the color of the text to change to red when the mouse moves over the text within the label tags.
For example, here is the code that I need to function as suggested above:
<b><label style="cursor:hand;" onClick="document.forms['s ites'].ele ments['but tons'][27] .click()"> SD</label> </b><br>
<input type="radio" name="buttons" value="29" onClick="dataBase(this.for m)">
I am hopeful that this can be done with CSS.
Thanks,
Kevin
I am looking for a 'hover' CSS color effect for text within label tags similar to what one would see for an <a href> link when hovering over the link text. I'd like the color of the text to change to red when the mouse moves over the text within the label tags.
For example, here is the code that I need to function as suggested above:
<b><label style="cursor:hand;" onClick="document.forms['s
<input type="radio" name="buttons" value="29" onClick="dataBase(this.for
I am hopeful that this can be done with CSS.
Thanks,
Kevin
ASKER
Jan,
Thanks for the reply.
Yes, your red color works fine in Internet Explorer, but I cannot get the hover effect color to change to blue.
I would rather not have to resort to <a href> links and further JavaScript, as I am already doing that behind the scenes with the onClick code.
Any other thoughts?
Kevin
Thanks for the reply.
Yes, your red color works fine in Internet Explorer, but I cannot get the hover effect color to change to blue.
I would rather not have to resort to <a href> links and further JavaScript, as I am already doing that behind the scenes with the onClick code.
Any other thoughts?
Kevin
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
IE does not support hover on any element except <a>
So you have three options:
1. Use mouseover on the label
2. Put a link inside the label like this: <label><a href="#">SD</a></label>
3. Change your design.
Cd&
So you have three options:
1. Use mouseover on the label
2. Put a link inside the label like this: <label><a href="#">SD</a></label>
3. Change your design.
Cd&
Well, than I learned something new today as well.
But COBOLdinosaur:
So the list on: http://css.maxdesign.com.au/listamatic2/vertical03.htm wouldn't work with the hovers if it didn't use tha a:s?
But COBOLdinosaur:
So the list on: http://css.maxdesign.com.au/listamatic2/vertical03.htm wouldn't work with the hovers if it didn't use tha a:s?
ASKER
madwax,
Your solution is working perfectly, thanks!
One other question, rather than assign the onMouseOver and the onMouseOut a specific color: "this.style.color='red'", could I assign it to a CSS name, i.e. citycolor, so that I could continue to use all CSS?
Thanks,
Kevin
Your solution is working perfectly, thanks!
One other question, rather than assign the onMouseOver and the onMouseOut a specific color: "this.style.color='red'", could I assign it to a CSS name, i.e. citycolor, so that I could continue to use all CSS?
Thanks,
Kevin
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Glad we could help. Thanks for the A. :^)
Cd&
Cd&
code:
<html>
<head>
</head>
<style>
#myLabel{
color: red;
}
#myLabel:hover{
color: blue;
}
</style>
<body>
<b><label id="myLabel" style="cursor:hand;" onClick="document.forms['s
<input type="radio" name="buttons" value="29" onClick="dataBase(this.for
</body>
</html>
working example: http://www.madwax.nu/test.php
Good luck,
//jan