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

我是web开发新手，我学习了Java、JSP、HTML、JS、CSS和JQ的基础知识。当鼠标悬停事件发生时，我正试图更改div的边框颜色，但我失败了。下面是相关代码，请指出错误并为我指出更好的方向。事先多谢

注：我几乎试过了所有的问题/答案，但还是没能完成。我想如果我把我自己的问题和代码一起发布，以获得对未来的建议会更好。谢谢是预付款

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

下面是css：

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

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

到目前为止：指针光标正在工作，但不会改变边框颜色。提前感谢。

更改您的css

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

小提琴：

另外，我建议您使用

悬停

功能，而不要使用鼠标输入和离开

$("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");
    });
}); 

---

Fiddle:

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

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

---

使用您的示例检查此fidde

---

您可以将选择器缩短为：

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

您已经设置了内联样式

边框顶部：4px实心#1c1c，因此在外部css中也需要为
.mouseOverNav
使用
边框顶部
样式

您还需要应用
！重要信息
属性，用于替代现有样式，因为内联样式优先于外部样式：

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



编辑：虽然上述建议有效，但实际上你应该避免使用
！重要信息
不必要时，来自MDN：

当一个！重要规则用于样式声明，如下所示
声明将覆盖CSS中的任何其他声明（无论在何处）
它在申报单上。虽然!！重要的事与此无关
具有特异性。使用！重要的是不好的做法，因为它使
调试很困难，因为您破坏了您的系统中的自然级联
样式表

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


此外，您还可以通过应用选择器，使用糟糕的CSS完成上述任务：

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

您只需使用CSS
：hover
即可实现此目的。无需使用JAVASCRIPT或JQUERY

在css中，您可以这样使用

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

这是小提琴
谢谢，它确实可以用定义的颜色创建边框，而且效果很好，但我在这里要找的是：边框顶部：4倍纯色#73C20E；因为我有一个与背景颜色相同的边框顶部，所以我只需要更改颜色，即边框顶部颜色：#73C20E；谢谢，但这不是我想要的，因为我已经创建了一个边界。边框顶部：4px实心#1c1c；我只想更改边框的颜色，即边框顶部颜色：#73C20E；在“”处检查更新的JSFIDLE，此处顶部边框颜色正在更新。非常感谢您，它可以正常工作。谢谢你解释这个问题！同样重要的财产。：）嘿，Felix，谢谢你的更新，这真的很有帮助，所以我在这里学到的是：如果我使用内联属性并希望通过CSS在事件上编辑它，那么我必须使用！重要财产。但是，如果我在外部CSS中完成这一切，它也会通过外部CSS进行修改。我说得对吗？是的，你说得对。如果您以正确的方式使用外部CSS，则无需使用
！重要信息
。非常感谢，请您详细说明一下您在这里使用的CSS中的“#id>元素：事件”。您正在使用
#navBar
中的所有标题。因此，首先选择
#navBar
，然后选择
div中的标题内容
，因此选择它作为第二个选择器，如
#navBar>div
。你需要鼠标移过的动作。因此，您需要对所选DOM
#navBar>div
#navBar选择navBar元素，而“>div”选择#navBar的所有子div，并且：hover是将鼠标悬停时的定义样式应用于所选元素的伪选择器。@Veera根据需要，您应该使用
边框顶部
属性。除非，否则它将作为一个整体
div的
border.@CJRamki不需要。由于OP仅定义了边框顶部内联，因此更改边框颜色时，它仅影响顶部边框。其他边界根本没有定义。
#homeButton:hover, #siteAdminButton:hover, #contactButton:hover{
   cursor: pointer;   
   border-top: 4px solid #73C20E;
}

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