5

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.

Community
  • 1
  • 1
Jared
  • 2,978
  • 4
  • 26
  • 45
  • 1
    You can do it using javascipt. is javascript appreciable ? – Sujeet Feb 25 '11 at 05:02
  • You can't. See: http://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css – jterrace Feb 25 '11 at 05:01
  • This is a repost of: http://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css The cliff notes are that `:hover` is a pseudo class and can really only be used within a stylesheet. You can create a class and assign it via PHP or use some JS to do `onmouseover` and `onmouseout`. – Xenethyl Feb 25 '11 at 05:01
  • Yes, I suppose Javascript can do it. – Jared Feb 25 '11 at 06:06

2 Answers2

5

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>

Sujeet
  • 1,780
  • 3
  • 16
  • 33
  • `document.getElementById(idObj.id).style.color = colorObj;` could also be done like this: `idObj.style.color = colorObj;`because you already have the object (this) so why not directly set it there without get it again with the document. - anyway: +1 because it was the right solution for a dynamic hover styling ;) – DominikAngerer Feb 22 '15 at 21:26
2

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.

Russell Dias
  • 70,980
  • 5
  • 54
  • 71