deepson2 Posted July 20, 2009 Share Posted July 20, 2009 Hello, I wanted to show on hover my record list. But it seems its not working. can anyone see my code and tell me what is wrong am doing? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script> /* when the dom is ready... */ window.addEvent('domready',function() { /* hide all controls right away */ $$('div.record-controls').setStyle('visibility','hidden'); /* add events for show/hide */ $$('div.record').each(function(rec) { var controls = rec.getFirst('div.record-controls'); rec.addEvents({ mouseenter: function() { controls.fade('in') }, mouseleave: function() { controls.fade('out') } }); }); }); </script> <style> <link > .record { width:700px; border:1px solid #ccc; padding:15px; margin:0 0 15px 0; } .record:hover { background:#eee; } .record-controls { font-size:10px; } .unapprove { color:#d98500; } .delete { color:#bc0b0b; } </style> </head> <body> <!-- more records above --> <div class="record"> <p> <strong>Comment Person 2</strong><br /> Hello world! </p> <div class="record-controls"> <a href="#" class="unapprove">Unapprove</a> | <a href="#">Edit</a> | <a href="#">Reply</a> | <a href="#">Spam</a> | <a href="#" class="delete">Delete</a> </div> </div> <div class="record"> <p> <strong>Comment Person 3</strong><br /> hello! </p> <div class="record-controls"> <a href="#" class="unapprove">Unapprove</a> | <a href="#">Edit</a> | <a href="#">Reply</a> | <a href="#">Spam</a> | <a href="#" class="delete">Delete</a> </div> </div> <!-- more records below --> </body> </html> Thanks in advance. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.