Question

43

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

rated 0 times [ 44] [ 1] / answers: 1 / hits: 22550 / 14 Years ago, fri, february 25, 2011, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

breap

Add To Favorites

Follow

Total Points: 606

Total Questions: 96

Total Answers: 108

Location: Djibouti

Member since Sun, Feb 27, 2022

2 Years ago

breap questions

1 Chain query/mutation calls with RTK Query using React Hooks

Thu, Jun 24, 21, 00:00, 3 Years ago

1 How to go to another screen in top tab navigation in react native

Wed, Nov 11, 20, 00:00, 4 Years ago

1 React Storybook not Recognizing a Story

Wed, Mar 18, 20, 00:00, 4 Years ago

1 How to call javascript Function in Oracle APEX on button click in dynamic action?

Tue, Nov 5, 19, 00:00, 5 Years ago

1 Issue with Discord.js avatarURL

Mon, Oct 7, 19, 00:00, 5 Years ago

View All

answered 14 Years ago lara · Accepted Answer

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>