Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 811
Jared Avatar asked Feb 25 '11 04:02

Jared


2 Answers

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>

like image 198
Sujeet Avatar answered Oct 07 '22 01:10

Sujeet


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.

like image 23
Russell Dias Avatar answered Oct 07 '22 01:10

Russell Dias