html - 悬停在不同元素上的效果

Question

我有这样的结构:

HTML

<div class="bottom-container">
    <div class="double-arrow"></div>
    <div class="bottom-box green margin-top">
        <h1 class="bottom-box-h1">Box title 1</h1>
        <p class="bottom-box-text">It is a long established fact that a reader will be distracted by the readable content</p>
    </div>
</div>

默认情况下不显示 .bottom-box-text。它有一个 display:none 属性。

当我将鼠标悬停在 .double-arrow div 上时，我需要显示 .bottom-box-text div。但我想不通。

我有这个 CSS:

.double-arrow:hover .bottom-box-text {
    display: inline;
}

我尝试了不同的选择器(如“+”“~”)，但它不起作用。

如有帮助，谢谢!

Answer 1

您可以使用通用兄弟选择器首先选择.bottom-box:

.bottom-box-text {
    display: none;
}

.double-arrow:hover ~ .bottom-box .bottom-box-text {
    display: inline;
}

<div class="bottom-container">
  <div class="double-arrow">Arrow</div>
  <div class="bottom-box green margin-top">
    <h1 class="bottom-box-h1">Box title 1</h1>
    <p class="bottom-box-text">It is a long established fact that a reader will be distracted by the readable content</p>
  </div>
</div>