Hi there, I am having trouble grasping the usage of mouseover and mouseout when dealing with a menu. I created a list of links and in testing, I've been able to hover over each link and they will animate, move over 10 pixels. On mouse out, they will move back. That's great, except when I hover over them, every link in the list moves. I want each link to move over as I only hover over that particular link. Here's my markup:
<html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $(".block a").mouseover(function(){ $(".block a").animate({ marginLeft: "10px", }, 1500 ); }); $(".block a").mouseout(function(){ $(".block a").animate({ marginLeft: "0px", }, 1500 ); }); }); </script> <style> div { background-color:#bca; width:100px; border:1px solid green; } </style> </head> <body> <ul class="block"> <li><a href="link1">Link1</a></li> <li><a href="link1">Link2</a></li> <li><a href="link1">Link3</a></li> <li><a href="link1">Link4</a></li> </ul> </body> </html> Any help would be much appreciated. Thanks in advance! DLee