Possible Duplicates:
How do I embed an “a:hover{…}” rule into a style attribute in the middle of a document?
How to write a:hover in inline CSS?
I want to dynamically change the hover colour of an element, but not using external CSS stylesheets, only inline. This is the code (using php to generate the element)
echo '
<div class="container" style="color:#'.$color.'">
'.$contents.'
</div>';
When the user hovers over this container element, the color style will change to the value of $color
(at the moment there is no hovering).
Any help would be appreciated.
This will help you if javascript is appreciable
<TD onMouseOver="this.bgColor='#00CC00'" onMouseOut="this.bgColor='#009900'" bgColor=#009900>
<A HREF="http://www.mysite.com">Click Here</A></TD>
or
Javascript Change Hyperlink Text Color Onmouseover
<style type="text/css">
a {
font-weight:bold;
font-family:verdana;
text-decoration:none;
}
</style>
<script type="text/javascript" language="javascript">
function changeColor(idObj,colorObj)
{
document.getElementById(idObj.id).style.color = colorObj;
}
</script>
<a href="#" style="color: #000000" onmouseover="this.style.color='#FF0000'" onmouseout="this.style.color='#000000'">
Link 1</a>
<br />
<br />
<a href="#" style="color: #999999" onmouseover="this.style.color='#008000'" onmouseout="this.style.color='#999999'">
Link 2</a>
<br />
<br />
<a href="#" style="color: #FF0000" onmouseover="this.style.color='blue'" onmouseout="this.style.color='#FF0000'">
Link 3</a>
<br />
<br />
<a id="lnk1" href="#" style="color: #008000" onmouseover="changeColor(this,'#FF0000');"
onmouseout="changeColor(this,'#008000');">Link Color change using javascript function</a>
You can't, since you can't set the pseudo-selectors inline. Ideally, you should design separate classes in your external css which would represent the various hover states you need, and in PHP assign these classes to your content.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With