CODEWITHSUNDEEP
javascriptcsswordpressstyles
Luca
Luca

Reputation: 15

Change header bottom border color on menu item mouse hover

I need to change the border bottom color of header bottom when I go over a menu item voice.

I tried a script I found but I'm not able to modify it correctly. Please help me. This is the code I try to use but I don't know how to correctly write the class.

jQuery (document).ready(function(){
jQuery ( "nav.main_menu > ul > li > a" )
.mouseenter(function() {
jQuery (".header_bottom").css("border-bottom","4px solid #d1007e;");
})
.mouseleave(function() {
jQuery (".header_bottom").css("border-bottom","4px solid #1d1d1b;");
});
});

When I go over each menu voice I want that header bottom border color change from #1d1d1b to #d1007e.

Upvotes: 0

Views: 167

Answers (2)

Ebrahim Nayakkan
Ebrahim Nayakkan

Reputation: 16

Remove the semicolon(;) from the CSS property value.

$(document).ready(function(){
    $( "nav.main_menu > ul > li > a" ).on('mouseenter',function() {
        $(".header_bottom").css('border-bottom','4px solid #d1007e');
    }).on('mouseleave',function() {
        $(".header_bottom").css("border-bottom","4px solid #1d1d1b");
    });
});

Upvotes: 0

Ravi Kadyan
Ravi Kadyan

Reputation: 323

Try this in your css..

.class_name:hover{
   border-bottom:4px solid #d1007e;
}

Upvotes: 1

Related Questions