第一个孩子元素悬停

Question

嗨，我的导航栏需要帮助。

我有第一个孩子的问题。

<ul>
<li class="active"><a href="#">Recent</a></li>
<li><a href="#">Adaugate</a></li>
<li><a href="#">Publicate</a></li>
<li><a href="#">trash</a></li>
<li><a href="#">Arhiva</a></li>

我需要第一个孩子（class = active＆name =最近的）才能将鼠标悬停在其他孩子的身上...

这是我需要的风格

    li  {
  display: inline-block;
  padding: 30px 50px;
  margin: -2px;
  border-bottom: 1px solid blue;

}

li.active {
  border-right: 1px solid blue;
  border-top: 1px solid blue;
  border-bottom: 0;
}

li:enabled {
  background-color: green;
}

li:hover {
  border-top: 1px solid blue;
  border-bottom:0px;

}

li:not(:first-child):hover  {
  border-right: 1px solid blue;
  border-left: 1px solid blue;

}

现在，当第一个孩子处于活动状态并且我将鼠标悬停在下一个元素上时，我需要从悬停的元素侧面取下边框。而且，如果任何一个元素都通过悬停其他元素而处于活动状态，则必须从悬停的元素上移开边框。

Answer 1

您可以像下面这样考虑父元素上的悬停状态：

li {
  display: inline-block;
  padding: 10px 5px;
  margin: -2px;
  border-bottom: 1px solid blue;
}

li.active {
  border-right: 1px solid blue;
  border-top: 1px solid blue;
  border-bottom: 0;
}
li:not(:first-child).active {
  border-left: 1px solid blue;
}

li:enabled {
  background-color: green;
}
/*remove from active when hover the parent*/
ul:hover .active {
  border-top:0;
  border-right:0;
  border-left:0;
  border-bottom: 1px solid blue;
}
/**/
li:hover,
li.active:hover{ /*keep on active if we hover active*/
  border-top: 1px solid blue;
  border-right: 1px solid blue;
  border-bottom: 0px;
}


li:not(:first-child):hover,
li:not(:first-child).active:hover{/*keep on active if we hover active*/
  border-left: 1px solid blue;
}

<ul>
  <li class="active"><a href="#">Recent</a></li>
  <li><a href="#">Adaugate</a></li>
  <li><a href="#">Publicate</a></li>
  <li><a href="#">trash</a></li>
  <li><a href="#">Arhiva</a></li>
</ul>

在另一个元素上处于活动状态时：

li {
  display: inline-block;
  padding: 10px 5px;
  margin: -2px;
  border-bottom: 1px solid blue;
}

li.active {
  border-right: 1px solid blue;
  border-top: 1px solid blue;
  border-bottom: 0;
}
li:not(:first-child).active {
  border-left: 1px solid blue;
}

li:enabled {
  background-color: green;
}
/*remove from active when hover the parent*/
ul:hover .active {
  border-top:0;
  border-right:0;
  border-left:0;
  border-bottom: 1px solid blue;
}
/**/
li:hover,
li.active:hover{ /*keep on active if we hover active*/
  border-top: 1px solid blue;
  border-right: 1px solid blue;
  border-bottom: 0px;
}


li:not(:first-child):hover,
li:not(:first-child).active:hover{/*keep on active if we hover active*/
  border-left: 1px solid blue;
}

<ul>
  <li><a href="#">Recent</a></li>
  <li><a href="#">Adaugate</a></li>
  <li class="active"><a href="#">Publicate</a></li>
  <li><a href="#">trash</a></li>
  <li><a href="#">Arhiva</a></li>
</ul>