Question

fiddle: https://jsfiddle.net/7o0zmrmq/6/

.hidden {
  opacity: 0;
  transition: opacity .4s linear;
}
.visible {

}
.visible:hover > ul {
  opacity: 1;
}

在示例中，可见类的<li>具有悬停选择器，并应显示所需的子<ul>。

虽然这一切都运作良好，但仅将链接本身悬停在下方也可以在将不透明度设置为1时启动过渡效果。

Answer 1

尝试让他们成为兄弟姐妹：

<ul class="container">
<h2 class="visible">Visible Hover</h2>
  <ul class="hidden">
    <li><a href="#">TEST</a></li>
  </ul>
</ul>



.hidden {
  visibility:hidden;
  opacity: 0;
  transition: opacity .4s linear;
}

.visible:hover + ul {
  visibility: visible;
  opacity: 1;
}

另请注意，您需要在visibility: hidden未显示时设置，否则您的光标仍会知道其中有链接。

Answer 2

你必须使用display none（这里你的jsfiddle已更新：https://jsfiddle.net/7o0zmrmq/10/）

<ul class="container">
    <li class="visible">Visible Hover 
      <ul class="hidden">
        <li><a href="#">TEST</a></li>
      </ul>
    </li>
</ul>

.hidden {
  opacity: 0;
  transition: opacity .4s linear;
  display:none;
}
.visible {

}
.visible:hover > ul {
  opacity: 1;
  display: block;
}

Answer 3

将鼠标悬停在孩子身上意味着你也在它的父母上空盘旋。有几种方法可以解决这个问题。

以下是两个例子。

您可以在可见li中添加范围，并将悬停添加到此处。

.hidden {
  opacity: 0;
  transition: opacity .4s linear;
  visibility: hidden;
}
.visible > span:hover + ul{
  opacity: 1;
  visibility: visible;
}

<ul class="container">
  <li class="visible"><span>Visible Hover</span>
    <ul class="hidden">
      <li><a href="#">TEST</a>
      </li>
    </ul>
  </li>
</ul>

或者您可以为容器添加高度并添加overflow: hidden。

.hidden {
  opacity: 0;
  transition: opacity .4s linear;
  visibility: hidden;
}
.visible:hover > ul {
  opacity: 1;
  visibility: visible;
}
.visible {
  overflow: hidden;
  height: 20px;
}
.visible:hover {
  height: auto;
}

<ul class="container">
  <li class="visible">Visible Hover 1
    <ul class="hidden">
      <li><a href="#">TEST</a>
      </li>
    </ul>
  </li </ul>

<a> on hover initiates undesired hover effect. What is going on here, and is there a way to stop it?

3 个答案: