Изменить цвет нижней границы заголовка при наведении мыши на элемент меню

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