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>

Answer 2

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

基本上，当双箭头悬停时，将选择紧随其后的div，并且具有.bottom-box-text的子级将应用效果。如果不是，则可能必须使用!important作为display上的属性。

悬停在其他元素上的效果

2 个答案: