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

Question

当我浏览菜单项语音时，我需要更改标头底部的边框底部颜色。

我尝试了一个脚本，但我无法正确修改它。请帮我。这是我尝试使用的代码，但我不知道如何正确编写课程。

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

当我遍历每个菜单时，我想要那个标头底部边框颜色从＃1D1D1B变为＃D1007E。

Answer 1

在您的CSS中尝试一下。

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

Answer 2

从CSS属性值中删除半隆(;(。

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