Question

我是Web开发的新手，我已经学习了Java，JSP，HTML，JS，CSS，JQ的基础知识。当我发现鼠标悬停事件发生时，我正试图改变div的边框颜色，但是我没有这样做。以下是相关代码，请指出错误并指出更好的方向。非常感谢。

P.S：我几乎尝试了所有stackoverflows的问题/答案，但我仍未能完成它。我认为如果我用代码发布自己的问题以获得未来的建议会更好。谢谢你的到来。

<div id="navBar" style="height: 50px; width: 480px;">
            <div id="homeButton" style="float: left; color: #73C20E; position:relative; width: 160px; height: 50px; border-top: 4px solid #73C20E;">
                <p>Home</p>
            </div>
            <div id="siteAdminButton" style="float: left; color: #73C20E;  position: relative; width: 160px; height: 50px; border-top: 4px solid #1C1C1C;" >
                <p>Site Administration</p>
            </div>
            <div id="contactButton" style="float: left; color: #73C20E;  width: 160px; height: 50px; border-top: 4px solid #1C1C1C;">
                <p>Contact Us</p>
            </div>                    
</div>

Heres JS：

$("document").ready(function (){
    $("#homeButton").mouseenter(function (){
        $(this).addClass("mouseOverNav");
    }).mouseleave(function (){
        $(this).removeClass("mouseOverNav");
    });  

    $("#siteAdminButton").mouseenter(function (){
        $(this).addClass("mouseOverNav");
    }).mouseleave(function (){
        $(this).removeClass("mouseOverNav");
    });

    $("#contactButton").mouseenter(function (){
        $(this).addClass("mouseOverNav");
    }).mouseleave(function (){
        $(this).removeClass("mouseOverNav");
    });
});

这是css：

.mouseOverNav {
   cursor: pointer;   
   border-color: #73C20E;
}

总结：我创建了3个带边框的div，其中2个具有与背景相同的边框颜色，我想在鼠标悬停时将边框颜色更改为我的主题，并在鼠标离开时将其更改回背景颜色光标指针。

到目前为止：指针光标正在工作，但它没有改变边框颜色。在此先感谢。

Answer 1

您可以将选择器缩短为：

$("document").ready(function () {
    $("#homeButton, #siteAdminButton, #contactButton").mouseenter(function () {
        $(this).addClass("mouseOverNav");
    }).mouseleave(function () {
        $(this).removeClass("mouseOverNav");
    });
});

您已在HTML中设置内嵌样式border-top: 4px solid #1C1C1C;，因此您需要在外部CSS中使用border-top样式.mouseOverNav。

您还需要应用!important属性来覆盖现有样式，因为内联样式优先于外部样式：

.mouseOverNav {
   cursor: pointer;   
   border-top: 4px solid #73C20E !important;
}

<强> Fiddle Demo

修改：虽然上述建议有效，但实际上您应该避免在不必要时使用!important，来自MDN docs ：

当样式声明使用！important规则时，这个声明覆盖CSS中的任何其他声明，无论在何处它在声明列表中。虽然，！重要无关具有特异性。使用！important是不好的做法，因为它使你努力调试，因为你打破了你的自然级联样式表。

在您的情况下，您可以将所有内联样式移动到外部css，如下所示：

#homeButton, #siteAdminButton, #contactButton {
    float: left;
    color: #73C20E;
    position:relative;
    width: 160px;
    height: 50px;
    border-top: 4px solid #73C20E;
}
#siteAdminButton, #contactButton {
    border-top: 4px solid #1C1C1C;
}

#navBar .mouseOverNav {
    cursor: pointer;
    border-top: 4px solid #73C20E;
}

<强> Fiddle Demo

此外，您可以通过应用 :hover 选择器来使用不良的CSS来完成上述任务：

#homeButton:hover, #siteAdminButton:hover, #contactButton:hover{
   cursor: pointer;   
   border-top: 4px solid #73C20E;
}

<强> Fiddle Demo

Answer 2

您可以简单地实现使用CSS :hover。不需要使用JAVASCRIPT或JQUERY

在css中，您可以像这样使用

#homeButton:hover, #siteAdminButton:hover, #contactButton:hover{
   cursor: pointer;   
   border-color: #73C20E !important;
}

这就是好事DEMO

Answer 3

您的要求可以使用CSS完成。根本不需要使用JS。

#navBar > div:hover{
   cursor: pointer;   
   border-color: #73C20E!important;
}

Answer 4

更改你的CSS

.mouseOverNav {
   cursor: pointer;   
   border-top: 4px solid #73C20E !important;
}

小提琴：http://jsfiddle.net/8sns6/3/

此外，我建议您使用hover功能而不是鼠标进入和离开

$("document").ready(function (){
    $("#homeButton").hover(function (){
        $(this).addClass("mouseOverNav");
    },function (){
        $(this).removeClass("mouseOverNav");
    });  

    $("#siteAdminButton").hover(function (){
        $(this).addClass("mouseOverNav");
    }, function (){
        $(this).removeClass("mouseOverNav");
    });

    $("#contactButton").hover(function (){
        $(this).addClass("mouseOverNav");
    }, function (){
        $(this).removeClass("mouseOverNav");
    });
});

小提琴：http://jsfiddle.net/8sns6/5/

Answer 5

使用您的示例检查此fidde http://jsfiddle.net/g6Jf2/

.mouseOverNav {
   cursor: pointer;   
   border: 1px solid #73C20E;
}

如何更改div中的边框颜色？

5 个答案: