Javascript - Mouse over rows

Faites un copier coller du code ci-dessous et lancez le dans votre navigateur.
Si vous souhaitez voir le résultat en démo (selon nous une bonne méthode d'apprentissage) cliquez ici (nouvelle fenêtre).

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

Commentaires

Poster un commentaire
ou venez en discuter sur:
Forum - Javascript

Coin du Webmaster

Vous disposez d'un site à forte audience?

Obtenez votre Kit Graphique pour vos sites!

Engagez des Freelance Pro.

Javascript - Mouse over rows

Javascript - Mouse over rows

Commentaires

Coin du Webmaster

Categories