使用jQuery选择div类的单个元素

I have a set of links in a header and I want to use jQuery to select a single one of those links and animate() over it. Here is my HTML:

我在标题中有一组链接,我想使用jQuery选择其中一个链接和animate()。这是我的HTML:

<div id="header_links"> <div class="header_link"><a href="/">Home</a></div> <div class="header_link"><a href="/aboutme">About Me</a></div> <div class="header_link"><a href="/resume">Resume</a></div> <div class="header_link"><a href="/contact">Contact Me</a></div> </div>

主页

关于我

恢复

与我联系

and here is my jQuery:

这是我的jQuery:

$(document).ready(function() {

    /*
     * Perform actions on header links:
     */
    var header_link = $('.header_link');

    header_link.bind('mouseenter', function() {
        $(this).find('a').animate(
            {
                height: '2.5em'
            }
        );

    });

    header_link.bind('mouseleave', function() {
        $(this).find('a').animate(
            {
                height: '2em'
            }
        );
    });

});

To be clear -- I want to be able to mouse over a link, increase its height to 2.5em, then put its height back at 2em after the mouse leaves the link. As is, all of the links are getting bigger and smaller.

要清楚 - 我希望能够将鼠标悬停在链接上,将其高度增加到2.5em,然后在鼠标离开链接后将其高度放回到2em。因此,所有链接都变得越来越小。

I apologize if this is a repeat of another question -- I looked through other similar questions and was having no luck in finding a solution to my problem.

如果这是另一个问题的重复,我道歉 - 我查看了其他类似的问题,并且没有找到解决问题的方法。

1 个解决方案

#1

should the height in mouseleave be 1em instead of 2em ?

如果mouseleave中的高度是1em而不是2em?

working fiddle here: http://jsfiddle.net/C7dYV/

在这里工作小提琴:http://jsfiddle.net/C7dYV/

#1