JSBin

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 {1}}变得非常讨厌。所以我转而使用hover，但是出现了另一个问题，就是我可以在div上{{1}}即使我不在'.title`上，是否有针对此事的解决方法？或者可以避免在可见性隐藏元素上悬停？

Answer 1

使用以下

更新您的CSS

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

    .menu {
        visibility: hidden;

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

你会得到结果。

Answer 2

原因是您的DOM结构会影响CSS选择器。就你的DOM和问题而言，必须使用相邻兄弟选择器。

JSBin

更改

div:hover .menu {
    visibility: visible;
}

要

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

Here is a link.

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

2 个答案:

JSBin