Perfect! I knew it couldn't have been that difficult. That's exactly
what I needed. Thanks!
On Mar 14, 5:04 pm, Josh Powell <seas...@gmail.com> wrote:
> The problem is this:
>
> $(".block a").mouseover(function(){
> $(".block a").animate({
>
> $('.block a') gets every instance of an a element with class block.
> So when you do the .animate on it, you are animating every element.
> Instead, you mean.
>
> $(".block a").mouseover(function(){
> $(this).animate({
>
> On Mar 14, 11:33 am, DLee <dan.b....@gmail.com> wrote:
>
> > 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
