[jQuery] Very New To JavaScript\JQuery - Mouseover and Mouseout Question

Sat, 14 Mar 2009 11:41:08 -0700 

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

Reply via email to