How can I modify the border color within a div element?

Question

How can I modify the border color within a div element?

My journey into web development is just beginning, and I've grasped the basics of Java, JSP, HTML, JS, CSS, and JQ. However, I've hit a roadblock while attempting to change the border color of a div upon mouse hover. Despite my efforts, I haven't been successful in achieving this effect. Below is the code snippet in question - any guidance on where I might be going wrong would be greatly appreciated. Thank you!

P.S: While I've scoured countless Stack Overflow questions and answers for a solution, I still find myself unable to crack this challenge. That's why I decided to pose my own query along with the relevant code, seeking suggestions for improvement moving forward. Thanks in 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.

javascript jquery html css

Answer 1

Answer №1

To make your selectors more concise, you can use the following code:

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

Since you have set inline style border-top: 4px solid #1C1C1C; in your HTML, ensure that you also include border-top style for .mouseOverNav in your external CSS file.

It is necessary to add the !important property to override the existing style as inline styles take precedence over external styles:

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

Check out the Fiddle Demo here!

Note: While the above solution works, it is advisable to avoid using !important unnecessarily, as mentioned in the MDN documentation:

When an !important rule is used on a style declaration, this declaration overrides any other declaration made in the CSS, regardless of specificity. However, using !important is not recommended because it disrupts the natural cascading of stylesheets and can make debugging difficult.

In such cases, you can move all inline styles to an external CSS file 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;
}

View the updated Fiddle Demo!

You can also achieve the same result using the :hover selector in CSS:

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

See the alternative approach in the Fiddle Demo!

Answer 2

To make your selectors more concise, you can use the following code:

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

Since you have set inline style border-top: 4px solid #1C1C1C; in your HTML, ensure that you also include border-top style for .mouseOverNav in your external CSS file.

It is necessary to add the !important property to override the existing style as inline styles take precedence over external styles:

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

Check out the Fiddle Demo here!

Note: While the above solution works, it is advisable to avoid using !important unnecessarily, as mentioned in the MDN documentation:

When an !important rule is used on a style declaration, this declaration overrides any other declaration made in the CSS, regardless of specificity. However, using !important is not recommended because it disrupts the natural cascading of stylesheets and can make debugging difficult.

In such cases, you can move all inline styles to an external CSS file 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;
}

View the updated Fiddle Demo!

You can also achieve the same result using the :hover selector in CSS:

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

See the alternative approach in the Fiddle Demo!

Answer 3

Answer №2

ACHIEVING THIS EFFECT IS EASY WITH CSS USING THE :hover PSEUDO-CLASS. YOU DON'T NEED TO USE JAVASCRIPT OR JQUERY

To implement this in CSS, you can do the following:

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

CHECK OUT THIS JSFIDDLE DEMO

Answer 4

ACHIEVING THIS EFFECT IS EASY WITH CSS USING THE :hover PSEUDO-CLASS. YOU DON'T NEED TO USE JAVASCRIPT OR JQUERY

To implement this in CSS, you can do the following:

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

CHECK OUT THIS JSFIDDLE DEMO

Answer 5

Answer №3

You can achieve your desired outcome with just CSS, eliminating the need for JavaScript completely.

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

Answer 6

You can achieve your desired outcome with just CSS, eliminating the need for JavaScript completely.

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

Answer 7

Answer №4

Take a look at this JSFiddle in action with your scenario: http://jsfiddle.net/g6Jf2/

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

Answer 8

Take a look at this JSFiddle in action with your scenario: http://jsfiddle.net/g6Jf2/

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

Answer 9

Answer №5

Update your CSS styling

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

See the updated code on this link

I recommend using the hover function instead of mouse enter and leave for better performance

$("document").ready(function (){
    $("#homeButton, #siteAdminButton, #contactButton").hover(function (){
        $(this).toggleClass("mouseOverNav");
    });
});

Check out the improved version on this fiddle

Answer 10

Update your CSS styling

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

See the updated code on this link

I recommend using the hover function instead of mouse enter and leave for better performance

$("document").ready(function (){
    $("#homeButton, #siteAdminButton, #contactButton").hover(function (){
        $(this).toggleClass("mouseOverNav");
    });
});

Check out the improved version on this fiddle

How can I modify the border color within a div element?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Widen Textbox Sideways

Safari iOS does not properly support responsive images when using srcset and sizes

Guide to defining the encoding of an XML file with JavaScript

Preserving the Selected Date on the Calendar Even After the PHP Variable is Passed

Running a PHP function within a PHP environment

Exploring the Battle of Efficiency: Stateless Components vs. Class Components in the Age of React Hooks - Determining the Superior Approach

Querying through a database containing 1 million <string Name, int score> pairs efficiently within sub-linear time

Tips on converting deeply nested JSON into an excel file using Node.js

What is the method for accessing a selector within a foreach loop?

Having trouble retrieving values for jVectorMap? The getElementById method doesn't seem to be functioning as

When hovering over nav bar links, shadows are not displayed

Question: How can I use the jQuery datepicker to ensure that the selected date remains in the

Is it possible to import files in Vue JavaScript?

Utilize CamelCase in jQuery for Better Code Readability

Is it possible to import a component from a production build of create-react-app?

Unable to obtain the necessary data during an AJAX insert operation

Steps to send parameters to external web service in MVC3

Storing images in MongoDB using React.js

unable to execute grunt post npm installation

Organizing your thoughts: Utilizing Etherpad-Lite's list