Using :hover for an element's inline style (using HTML/CSS/php) [duplicate]

Question

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 is a repost of: stackoverflow.com/questions/1033156/… 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
– Xenethyl, Commented Feb 25, 2011 at 5:01

Sujeet · Accepted Answer · 2011-02-25 05:04:40Z

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>

answered Feb 25, 2011 at 5:04

Sujeet

1,8083 gold badges17 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DominikAngerer Over a year ago

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 ;)

Russell Dias · Accepted Answer · 2011-02-25 04:59:55Z

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.

answered Feb 25, 2011 at 4:59

Russell Dias

73.9k5 gold badges58 silver badges72 bronze badges

Collectives™ on Stack Overflow

Using :hover for an element's inline style (using HTML/CSS/php) [duplicate]

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related