Geek Answers Handbook

Usage: guidance for an inline style element (using HTML / CSS / php)

Possible duplicates:
How do I embed an "a: hover {...}" rule into a style attribute in the middle of a document?
How to write: hover over inline CSS?

I want to dynamically change the hover color of an element, but not using external CSS stylesheets, only built-in ones. This is the code (using php to generate the item)

echo '
<div class="container" style="color:#'.$color.'">
  '.$contents.'
</div>';

When the user hangs over this container element, the color style will change to a value $color(there is currently no freeze).

Any help would be appreciated.

+5
source share
2 answers

, javascript

<TD onMouseOver="this.bgColor='#00CC00'" onMouseOut="this.bgColor='#009900'" bgColor=#009900>
<A HREF="http://www.mysite.com">Click Here</A></TD>

  Javascript 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>

+5

, inline. CSS, , , PHP .

+2

More articles:


All Articles