Question

我有一个菜单效果，它突出显示您悬停在菜单上的标题，问题是当您将鼠标悬停在徽标上时它也会突出显示徽标......

徽标位于类名为.centered-inline-logo-wrap的li中我只需要知道在触发底部效果时如何忽略它......

#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
 content: "";
 position: absolute;
 z-index: 2;
 left: 0;
 right: 0;
}
#top-menu li a:before {
 content: "";
 position: absolute;
 z-index: -2;
 left: 0;
 right: 100%;
 bottom: 50%;
 background: #FFF; /*** COLOR OF THE LINE ***/
 height: 3px; /*** THICKNESS OF THE LINE ***/
 -webkit-transition-property: right;
 transition-property: right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#top-menu li a:hover {
 opacity: 1 !important;
}
#top-menu li a:hover:before {
 right: 0;
}
#top-menu li li a:before {
 bottom: 10%;
}

Answer 1

可以使用:not()选择器，如：

#top-menu li:not(.centered-inline-logo-wrap) a:before

li:not(.centered-inline-logo-wrap)部分是li个没有课程centered-inline-logo-wrap的元素。

如何忽略css中的一个元素？

1 个答案: