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

【问题标题】：Change header bottom border color on menu item mouse hover在菜单项鼠标悬停时更改标题底部边框颜色
【发布时间】：2019-11-09 09:06:18
【问题描述】：

当我越过菜单项声音时，我需要更改标题底部的边框底部颜色。

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

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。

【问题讨论】：

在我们可以帮助您之前，您需要提供必要的基本信息以使帮助成为可能。我们不知道您的 HTML 代码是什么样的以及应用了什么格式，因此目前很难回答。请阅读How to Ask 和minimal reproducible example，然后相应地编辑您的问题。
请添加HTML代码。

标签： javascript css wordpress styles

【解决方案1】：

在你的 css 中试试这个。

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

【讨论】：

【解决方案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");
    });
});

【讨论】：