javascript - 使用 jQuery 在悬停时创建边框？

Question

我整个上午都在尝试让这段代码正常工作，但完全无济于事。我知道我只是在做一些简单的错误，但我就是想不通？

你们中的任何人都可以帮助我吗？

当您越过导航中的链接时，我正在尝试显示一个白色的底部边框。您当前所在的页面将显示为绿色，因此该链接的边框在悬停时需要为绿色而不是白色。

http://jsfiddle.net/sCt7r/

        $(document).ready(function() {
        $("hoverEffect").hover(
            function() { $(this).addClass("Hover1"); },
            function() { $(this).removeClass("Hover1"); }
            );
        });

        $(document).ready(function() {
        $(".navSelect").hover(
            function() { $(this).addClass("Hover2"); },
            function() { $(this).removeClass("Hover2");}
            );
        });

Answer 1

一些变化:

1) 你的 fiddle 中缺少 jQuery

2) 您只需要一个 DOM 就绪处理程序 $(document).ready(function() {...});

3) 使用 . 来定位类，所以使用 $(".hoverEffect") 而不是 $("hoverEffect")

4) 您需要添加类 hover1 和 hover2 而不是 Hover1 和 Hover2

Updated Fiddle

但实际上您可以使用纯 CSS 使用 :hover 选择器来完成此任务:

.hoverEffect:hover {
    border-bottom: 1px solid black;
}
.navSelect:hover {
    border-bottom: 1px solid green;
}

Updated Fiddle