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

Question

我是网络开发的新手，我已经学习了 Java、JSP、HTML、JS、CSS、JQ 的基础知识。当发生鼠标悬停事件时，我被困在试图更改 div 的边框颜色的位置，但我没有这样做。下面是相关代码，请指出错误并指出更好的方向。提前致谢。

P.S:我已经尝试了几乎所有的 stackoverflows 问题/答案，但我仍然未能完成。我认为如果我用代码发布我自己的问题以获得对 future 的建议会更好。提前致谢。

<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。

到目前为止:Pointer Cursor 可以正常工作，但不会更改边框颜色。提前致谢。

Answer 1

您可以将选择器缩短为:

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

您已经在 HTML 中设置了内联样式 border-top: 4px solid #1C1C1C;，因此您需要为 使用 border-top 样式。 mouseOverNav 在你的外部 css 中也是如此。

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

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

Fiddle Demo

---

编辑:虽然上面的建议有效，但实际上你应该避免在不必要的时候使用 !important，来自 MDN docs :

When an !important rule is used on a style declaration, this declaration overrides any other declaration made in the CSS, wherever it is in the declaration list. Although, !important has nothing to do with specificity. Using !important is bad practice because it makes debugging hard since you break the natural cascading in your stylesheets.

在您的情况下，您可以将所有内联样式移动到外部 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