How to do this? (hover)

Hi i came accross with this site adstd.com and see that when you point your mouse on the contents the hr turns red.. can please teach me how to do it..?

 

Its done with a bit of javascript.. Check the source code

 

Yeah, that is done with javascript.

If you check the source, there is a function called "setBGColor()" that changes a table cell's background color. This function is called when the mouse goes over certain table cells, like so:

<td onMouseOver="javascript: setBGColor(this, 1, 0);" onMouseOut="javascript: setBGColor(this, 0, 0);">

Code (markup):

Hope that helps.

 

Which should probably be done in CSS instead using the :hover property, with a .htc file to make IE 5&6 work.

Try this on for size:
http://battletech.hopto.org/for_others/Kojakfilth/hovertest.html

and the CSS
http://battletech.hopto.org/for_others/Kojakfilth/screen.css

for IE 6 and earlier it relies on csshover2.htc which you can find out all about here:
http://www.xs4all.nl/~peterned/csshover.html

which implements :hover and :focus in IE6/earlier via javascript. On IE7 and on all other browsers it's a purely CSS solution.

 

thanks guys for your suggestions. i will try this out later.. i think deathshadow have the best suggestion. coz im really want to do it in css..

thanks guys.

Kojak

 

I was shocked the other two people mentioned JavaScript. Follow this guys advice, this is the best way to go about it.

 

kojakfilth asked how it was done @ adstd.com and its done there with javascript... that being said i myself do prefer deathshadows implementation

 

I only mentioned Javascript because he wanted to know how the website did it. Of course CSS would be a better way to go, using :hover. If you need help with that, here's an explanation.