超级简单的CSS问题

Question

大家好，我们在这里有一个网站：http://americanbitcoinacademy.com/

我正在尝试更改此悬停部分：

我试图以此为目标：

.main-color-1-bg, 
.main-color-1-bg-hover:hover, 
input[type=submit], 
table:not(.shop_table)>thead, 
table:not(.shop_table)>tbody>tr:hover>td,
table:not(.shop_table)>tbody>tr:hover>th, 
header .dropdown-menu>li>a:hover, 
header .dropdown-menu>li>a:focus, header .multi-column > .dropdown-menu li.menu-item:hover, 
header .multi-column > .dropdown-menu .menu-column li.menu-item:hover,     
.un-icon:hover, 
.dark-div .un-icon:hover, 
.woocommerce-cart .shop_table.cart thead tr, 
.uni-addtocart .add-text, 
.event-classic-item .item-thumbnail:hover a:before, 
.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span, .course-list-table>tbody>tr:hover>td, .course-list-table>tbody>tr:hover>th, .project-item:hover .project-item-excerpt, .navbar-inverse .navbar-nav>li>a:after, .navbar-inverse .navbar-nav>li>a:focus:after, .topnav-sidebar #lang_sel_click ul ul a:hover, div.bbp-submit-wrapper .button, .topnav-sidebar #lang_sel ul ul a:hover{
color: red;
}

但它会将菜单的整个颜色更改为红色。如何在不影响其他元素的情况下更改菜单下悬停滚动的颜色？

请帮忙！

Answer 1

这是你可以改变那个伪元素的颜色的方法：

.navbar-inverse .navbar-nav>li>a:after, .navbar-inverse .navbar-nav>li>a:focus:after {
    background-color: red;
}

并删除您尝试更改的css选择器的.navbar-inverse .navbar-nav>li>a:after, .navbar-inverse .navbar-nav>li>a:focus:after,行。这将使它们分离。

Answer 2

一个简单问题的简单答案。

将这种悬停状态作为伪元素放置是一种常见做法。当您使用检查器时，请在css规则的底部进一步检查这些元素。

.navbar-inverse .navbar-nav>li>a:focus:after {
    background-color: red; /*or whatever colour you wish*/
}

请不要忘记标记正确的答案！

希望这有帮助。