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).

Code Source

Nice effect to add to your tables.

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

download the file

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

Webmaster Corner

The ClickBnk Code
Another Killer Product From Michael Jones, simply follow the Blueprint For Easy Online Wealth Using Click Bank...

Twitter Traffic Machine
The Automated Growth & Money Making System from growing A Twitter Account Rapidly W/total Automation Via 5 Videos!

iPowerWeb
Incredible Membership Packages - Web Hosting!

→ Maverick Money Makers - Get Paid For Life!

Mouse over rows

Mouse over rows

Webmaster Corner

Categories