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

Question

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.

PS: 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.

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

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

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

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

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

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

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.

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

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

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

Fiddle Demo

Answer 2

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

In css, you can use like this

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

HERE IS THE FIDDLE DEMO

Answer 3

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

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

Answer 4

change your 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/

Answer 5

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

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