Javascript - Mouse over rows

Simply copy and paste the following code inside an html page and run it from a browser (tested on IE & Mozilla).
If you want to see the live result (we believe this is the best way to learn what is the script about), try it here (new window).

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>ROW effect using Javascript</title> <meta http-equiv="content-language" content="en" /> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> .whole{border:1px solid #3f3f3f;width:600px} .whole a{color:#050505;font-weight:bold;text-decoration:none;border-bottom:1px dotted #050505;font-size:12px} .whole a:hover{color:orange;border-bottom:1px dotted orange} .one{background-color:#fcfcfc;padding:5px} .two{background-color:#cfcfcf;padding:5px} .rightcol{float:right;border-left:1px solid #a3a3a3;padding-left:5px} .rightcol a{color:red;text-decoration:underline;border:0px;} .rightcol a:hover{color:#287ACF;text-decoration:underline;border:0px;} .whole h2{margin-top:0px;font-size:14px;color:gray} </style> </head> <body> <h1>Css row design</h1> <div class="whole"> <div class="one" onmouseover="javascript:this.style.backgroundColor='#C8E3EE';" onmouseout="this.style.backgroundColor='#fcfcfc';"><span class="rightcol"><a href="#">action with this data</a><br /><a href="#">link</a><br /><a href="#">other link</a><br /></span><h2>Title 1 (date of title)</h2><p>Description, any text here... [<a href="#">READ MORE</a>]</p></div> <div class="two" onmouseover="this.style.backgroundColor='#C8E3EE';" onmouseout="this.style.backgroundColor='#cfcfcf';"><span class="rightcol"><a href="#">action with this data</a><br /><a href="#">link</a><br /><a href="#">other link</a><br /></span><h2>Title 2 (date of title)</h2><p>Description, any text here... [<a href="#">READ MORE</a>]</p></div> <div class="one" onmouseover="this.style.backgroundColor='#C8E3EE';" onmouseout="this.style.backgroundColor='#fcfcfc';"><span class="rightcol"><a href="#">action with this data</a><br /><a href="#">link</a><br /><a href="#">other link</a><br /></span><h2>Title 3 (date of title)</h2><p>Description, any text here... [<a href="#">READ MORE</a>]</p></div> <div class="two" onmouseover="this.style.backgroundColor='#C8E3EE';" onmouseout="this.style.backgroundColor='#cfcfcf';"><span class="rightcol"><a href="#">action with this data</a><br /><a href="#">link</a><br /><a href="#">other link</a><br /></span><h2>Title 4 (date of title)</h2><p>Description, any text here... [<a href="#">READ MORE</a>]</p></div> <div class="one" onmouseover="this.style.backgroundColor='#C8E3EE';" onmouseout="this.style.backgroundColor='#fcfcfc';"><span class="rightcol"><a href="#">action with this data</a><br /><a href="#">link</a><br /><a href="#">other link</a><br /></span><h2>Title 5 (date of title)</h2><p>Description, any text here... [<a href="#">READ MORE</a>]</p></div> <div class="two" onmouseover="this.style.backgroundColor='#C8E3EE';" onmouseout="this.style.backgroundColor='#cfcfcf';"><span class="rightcol"><a href="#">action with this data</a><br /><a href="#">link</a><br /><a href="#">other link</a><br /></span><h2>Title 6 (date of title)</h2><p>Description, any text here... [<a href="#">READ MORE</a>]</p></div> <div class="one" onmouseover="this.style.backgroundColor='#C8E3EE';" onmouseout="this.style.backgroundColor='#fcfcfc';"><span class="rightcol"><a href="#">action with this data</a><br /><a href="#">link</a><br /><a href="#">other link</a><br /></span><h2>Title 7 (date of title)</h2><p>Description, any text here... [<a href="#">READ MORE</a>]</p></div> <div class="two" onmouseover="this.style.backgroundColor='#C8E3EE';" onmouseout="this.style.backgroundColor='#cfcfcf';"><span class="rightcol"><a href="#">action with this data</a><br /><a href="#">link</a><br /><a href="#">other link</a><br /></span><h2>Title 8 (date of title)</h2><p>Description, any text here... [<a href="#">READ MORE</a>]</p></div> </div> </body> </html>

Note:
- to implement this behavior, we had to use javascript against CSS which is not compatible over browsers (using the :hover feature of CSS on div or span elements),
- You may change the values of the CSS style to change the design of the table and its rows.

Comments

Post the first comment now
or discuss about it at this address:
Forum - Javascript

Webmaster Corner

The Millionaire league
Dozens of Easy and Automatic Ways to Make Money Online Everyday!

Niche Annihilation Method
Crush Your Competition!
Download the method Now

iPowerWeb
Incredible Membership Packages - Web Hosting!

One Month Free Trial! ProStores - an eBay Company
Gain customers, increase sales, and boost profits with your own Web Store.

→ Get Google Pay-Per-Click Ads Free!
→ Automated Cash Formula $$$

Javascript - Mouse over rows

Javascript - Mouse over rows

Comments

Webmaster Corner

Categories