Question

我有一个由ul和一些li和a元素组成的导航栏，如下所示：

/*Fonts*/
@import url(https://fonts.googleapis.com/css?family=Libre+Baskerville);

/*Header*/
.header-wrapper {
    background-color: #696969;
	height: 53px;
	width: 100%;
	top: 0;
	margin: 0;
 	padding: 0;}
.header-nav {
	background-color: darkblue;
	top: 0;
	height: 48px;
	margin: 0;
	padding: 0;
	list-style-type: none;}
.header-nav-element {
	float: left;}
.header-nav-element-logo {
	height: 48px;}
.header-nav-element-link {
	display: block;
	text-decoration: none;
	color: white;
	padding: 14px 16px;
	font-family: "Libre Baskerville", serif;
	transition-duration: 0.3s}
.active {
	background-color: #696969;}
.header-nav-element-link:hover:not(.active) {
	background-color: #808080;}

<div class="header-wrapper">
  <ul class="header-nav">
    <li class="header-nav-element noselect"><img src="../img/indexlogo.JPG" alt="" class="header-nav-element-logo"></li>
    <li class="header-nav-element noselect active"><a href="#" class="header-nav-element-link">Home</a></li>
    <li class="header-nav-element noselect"><a href="#" class="header-nav-element-link">Bio</a></li>
    <li class="header-nav-element noselect"><a href="#" class="header-nav-element-link">Stances</a></li>
    <li class="header-nav-element noselect"><a href="#" class="header-nav-element-link">Solutions</a></li>
  </ul>
</div>

正如您所看到的，即使我已指定不使用，活动选项卡也会在悬停时亮起。为什么会发生这种情况，我该如何解决？

Answer 1

这是因为您的:not(.active)已应用于a，但active类位于其父级li

你可以通过这样做来解决它 -

.header-nav-element:not(.active):hover .header-nav-element-link

或者通过将active类移动到具有类header-nav-element-link的元素来修改HTML。

Answer 2

根据the MDN documentation of :not()：

此选择器仅适用于一个元素;你不能用它来排除所有的祖先。

.header-nav-element是.header-nav-element-link的祖先。

变化：

.header-nav-element-link:hover:not(.active) {
    background-color: #808080;}

为：

.header-nav-element:hover:not(.active) {
    background-color: #808080;}

已更正摘要：

＆＃13;

.header-nav {
  background-color: darkblue;
  top: 0;
  height: 48px;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.header-nav-element {
  float: left;
}
.header-nav-element-logo {
  height: 48px;
}
.header-nav-element-link {
  display: block;
  text-decoration: none;
  color: white;
  padding: 14px 16px;
  font-family: "Libre Baskerville", serif;
  transition-duration: 0.3s
}
.active {
  background-color: #696969;
}
.header-nav-element:hover:not(.active) {
  background-color: #808080;
}

＆＃13;

<ul class="header-nav">
  <li class="header-nav-element noselect"><img src="../img/indexlogo.JPG" alt="" class="header-nav-element-logo"></li>
  <li class="header-nav-element noselect active"><a href="#" class="header-nav-element-link">Home</a></li>
  <li class="header-nav-element noselect"><a href="#" class="header-nav-element-link">Bio</a></li>
  <li class="header-nav-element noselect"><a href="#" class="header-nav-element-link">Stances</a></li>
  <li class="header-nav-element noselect"><a href="#" class="header-nav-element-link">Solutions</a></li>
</ul>

＆＃13;

：not（）无法正常运行

2 个答案: