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

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 *s 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.

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

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

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.

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

5 个解决方案

#1

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-top style for .mouseOverNav in your external css as well.

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

You also need to apply !important property 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 !important when unnecessary, from MDN docs:

编辑:虽然上面的建议有效,但实际上你应该避免使用!重要的是不必要的,来自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.

在样式声明上使用!important规则时,此声明将覆盖CSS中的任何其他声明,无论它在声明列表中的何处。虽然,重要与特异性无关。使用!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 :hover selector:

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

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

Fiddle Demo

#2

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

你可以简单地实现这个使用CSS:悬停。不需要使用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

这是一个有趣的演讲

#3

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

#4

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

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

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

#5

change your css

改变你的CSS

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

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

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

另外我建议你使用悬停功能而不是鼠标进入和离开

$("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/