让悬停在嵌套元素上工作

本·琼斯

Bootstrap DIV 正在阻止 CSS:hover工作。我认为这是一个选择器问题？

这不起作用：

div#testimonial1 {
  display: none;
}
span:hover+div div#testimonial1 {
  display: block;
}

<h2 style="text-align:center">Testimonials</h2>
<div class="col-sm-12 col-md-4 arrow_box" style="padding-top:20px">
  <div class="col-xs-12 testimonial1h">
    <span style="line-height:75px;font-size:16px;verticle-align:middle"><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" width="75" height="75" alt="" /> Name Here</span>
  </div>
</div>
<div class="col-sm-12 col-md-8">
  <div id="testimonial1">
    <p style="text-align: center">"Blah blah blah"</p>
    <h3 style="text-align: center">Name Here</h3>
  </div>
</div>

然而，这确实：

div#testimonial1 {
  display: none;
}
span:hover+div div#testimonial1 {
  display: block;
}

<h2 style="text-align:center">Testimonials</h2>
<span class="button" style="line-height:75px;font-size:16px;verticle-align:middle"><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" width="75" height="75" alt="" /> Name Here</span>
<div class="col-sm-12 col-md-8">
  <div id="testimonial1">
    <p style="text-align: center">"Blah blah blah"</p>
    <h3 style="text-align: center">Name Here</h3>
  </div>
</div>

我已经尝试过诸如span.button等的选择器，但我似乎无法找到正确的选择器来定位跨度以获得悬停效果？

迈克尔·科克

在您的第一个示例中，span嵌套在 a 中，div而在第二个示例中，则不是。所述+选择器是一个相邻的兄弟选择器。这意味着它选择与其相邻的下一个元素。在您的第一个示例中，跨度没有相邻元素。

要使您的第一个示例工作，您需要:hover在与div div#testimonial1要显示的元素相邻的元素上设置伪类，这将是div它之前的元素。像这样。

div#testimonial1 {
  display: none;
}

.arrow_box:hover + div div#testimonial1 {
  display: block;
}

<h2 style="text-align:center">Testimonials</h2>
<div class="col-sm-12 col-md-4 arrow_box" style="padding-top:20px">
  <div class="col-xs-12 testimonial1h">
    <span style="line-height:75px;font-size:16px;verticle-align:middle"><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" width="75" height="75" alt="" /> Name Here</span>
  </div>
</div>
<div class="col-sm-12 col-md-8">
  <div id="testimonial1">
    <p style="text-align: center">"Blah blah blah"</p>
    <h3 style="text-align: center">Name Here</h3>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。