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

Question

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

PS:我几乎尝试了所有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>

继承人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个具有与背景相同的边框颜色,我想在鼠标悬停时将边框颜色更改为我的主题,并在鼠标离开时将其更改回背景颜色并使光标变为指针.

到目前为止:Pointer Cursor正在工作,但它没有改变边框颜色.提前致谢.

Answer 1

您可以将选择器缩短为:

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

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

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

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

小提琴演示

编辑:虽然上面的建议有效,但实际上你应该避免!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;
}

小提琴演示

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

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

小提琴演示