html - 如何不悬停在可见性隐藏元素上？

Question

在以下两段 HTML 代码中，我希望外部 DIV 看起来与最宽元素的宽度相同，并且每当我将鼠标悬停在 .title 上时，都会显示“.menu”。

<div>
      <span class="title">abcdefghijklmn</span>
      <span class="menu">
           <span class="child">abcde</span>
           <span class="child">abcd</span>
           <span class="child">abc</span>
           <span class="child">ab</span>
      </span>
</div>

注意 .title 中的单词比 .child 中的单词长

<div>
      <span class="title">abcde</span>
      <span class="menu">
           <span class="child">abcdefghijklmn</span>
           <span class="child">abcd</span>
           <span class="child">abc</span>
           <span class="child">ab</span>
      </span>
</div>

我尝试使用以下 CSS 来绕过它，但 hover 效果不佳。

.container {
  color:#fff;
  display: inline-block;
}
.title {
  background: blue;
}
.title, .menu {
    display: list-item;
}

.menu {
  visibility: hidden;
}

.child {
    display: block;
    background: red;
}

.title:hover + span{
    visibility: visible;
}
.menu:hover {
  visibility: visible;
}

参见 JS Bin这里

注意这里，我没有使用display来切换.menu，因为当hover div 你会看到 .title 的扩展非常令人讨厌。所以我转而使用 visibility，但出现了另一个问题，即我可以 hover 在 div 上，即使我不在 '.title` 上，整个事情有解决方法吗？还是可以避免将鼠标悬停在可见性隐藏元素上？

Answer 1

使用以下内容更新您的 CSS

     .title, .menu {
        display: list-item;
    }

    .menu {
        visibility: hidden;

    }
    div
    {
        display: inline-block;
    }
    div:hover .menu {
        visibility: visible;
    }

你会得到结果。