更改菜单项鼠标悬停时标题底部边框的颜色

Question

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.

Answer 1

Try this in your css..

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

Answer 2

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