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

How to change border color in div ?

提问by Haris Mehmood

I am new to web development, i have learned basics of Java, JSP, HTML, JS, CSS, JQ. I am stuck at a point in which I am trying to change the border color of a div when mouse hover event occurs, but I am failing in doing so. Below is the related code, please point out the mistakes and point me in a better directions. Thanks alot in advance.

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

P.S: I have tried almost every stackoverflows questions/answers but I still failed to accomplished it. I thought it would be better if I post my own question with code to get suggestions for future aswell. Thanks is advance.

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>

Heres JS:

继承人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");
    });
});          

and here is css:

这是css：

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

Summary: I have created 3 divs with borders, 2 of which have the same border color as background, I want to change border color to my theme whenever mouse hovers, and change it back to the background color when mouse leaves and make the cursor a Pointer.

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

So far: Pointer Cursor is working but its not changing the border color. Thanks in Advance.

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

回答by Felix

You can shorten your selectors to:

您可以将选择器缩短为：

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

You've set inline style border-top: 4px solid #1C1C1C;in your HTML, so you need to use border-topstyle for .mouseOverNavin your external css as well.

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

You also need to apply !importantproperty to override the existing style since inline style take precedence over external style:

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

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

Fiddle Demo

小提琴演示

---

---

Edit: Although above suggestion works, but actually you should avoid to use !importantwhen unnecessary, from MDN docs:

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

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.

当 !important 规则用于样式声明时，此声明将覆盖 CSS 中的任何其他声明，无论它在声明列表中的任何位置。虽然， !important 与特异性无关。使用 !important 是不好的做法，因为它使调试变得困难，因为您破坏了样式表中的自然级联。

In your case, you can move all the inline styles to external css, like this:

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

小提琴演示

Also, you can achieve above task using poor CSS by applying :hoverselector:

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

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

Fiddle Demo

小提琴演示

回答by CJ Ramki

YOU CAN SIMPLY ACHIEVE THIS USING CSS :hover. NO NEED TO USE JAVASCRIPT OR JQUERY

您可以使用 CSS 轻松实现这一点:hover。无需使用 JAVASCRIPT 或 JQUERY

In css, you can use like this

在css中，你可以这样使用

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

HERE IS THE FIDDLE DEMO

这是小提琴演示

回答by Veera

Your requirement can be done using CSS. No need to use JS at all.

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

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

回答by Nikhil Mittal

Check this fidde working with your example http://jsfiddle.net/g6Jf2/

检查这个 fidde 使用你的例子 http://jsfiddle.net/g6Jf2/

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

回答by zzlalani

change your css

改变你的 css

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

Fiddle: http://jsfiddle.net/8sns6/3/

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

Also I will suggest you to use hoverfunction rather of mouse enter and leave

另外我会建议你使用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");
    });
}); 

Fiddle: http://jsfiddle.net/8sns6/5/

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