Question

我一直试图让这段代码整个上午工作，但绝对无济于事。我知道我只是做了一些简单的错误，但我无法解决这个问题？

你们中的任何人能帮我一把吗？

当您翻过导航链接时，我试图让白色底部边框显示出来。您当前所在的页面将显示为绿色，因此该链接的边框在悬停时需要为绿色而不是白色。

        $(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）你在小提琴中缺少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

Answer 2

你不需要jQuery。只需使用[CSS :hover]。（https://developer.mozilla.org/docs/Web/CSS/:hover）

.navigation a.hoverEffect:hover{
    border-bottom: 1px solid black;
}

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

↪You can see this code in action at JSFiddle

Answer 3

代码中的一些错误通过代码

$(document).ready(function() {
                $(".hoverEffect").on("mouseover", function(){
                $(this).addClass("hover1"); 

            });
$(".navSelect").on("mouseover", function(){
               $(this).addClass("hover2"); 
                $(this).removeClass("Hover2");
});
            });

http://jsfiddle.net/sCt7r/17/

Answer 4

我在代码中做了一些更改，试试这个

http://jsfiddle.net/3LXH4/

但是还有一种使用css的简单方法，你也可以试试..

继承代码

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

            $(".navSelect").hover(
                function() { $(this).addClass("hover2"); },
                function() { $(this).removeClass("hover2");}
            );
        });

Answer 5

$(".hoverEffect").on('mouseover', function(){
    $(this).addClass("hover1");
});
$(".hoverEffect").on('mouseout', function(){
    $(this).removeClass("hover1");
});

在你的代码中出现一些错误：它不是Hover2，它的悬停2 $（“hoverEffect”）。悬停（....必须是$（“。hoverEffect”）。悬停（

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

5 个答案: