使嵌套元素的悬停效果生效

Question

使嵌套元素的悬停效果生效

4

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 元素？

- Ben Jones

4个回答

1

在第一个代码块中，span 是 div (.testimonial1h) 的唯一子元素。（我想你指的是 .testimonial1。）

在第二个代码块中，span 不是 div 的子元素，而是 div 的兄弟元素。 相邻兄弟组合器（+）（也称为下一个同级选择器）针对的是紧随另一个元素之后的元素。

在第一个代码块中这不起作用，因为 span 没有兄弟元素。

它在第二个代码块中起作用，因为 div#testimonial1 是一个 div 的后代（你有 div div#testimonial1），并且该 div 紧随一个 span 兄弟元素之后。

如果你想让第一个代码块起作用（即，当兄弟节点的子元素悬停时定位到一个元素），那么这不会使用CSS实现。详情请参见此处: CSS是否有父级选择器?

- Michael Benjamin

0

你正在比较苹果和橙子，因为你的第一个代码片段的HTML DOM结构与第二个不同，但你应用了相同的CSS，这是行不通的。在你的第一个例子中，你有两个div作为span的父元素。而在第二个例子中，span是body的直接子元素。

尝试使用这个HTML结构，它应该可以正常工作。

    <h2 style="text-align:center">Testimonials</h2>
<span class="col-sm-12 col-md-4 arrow_box" 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>

- atomCode

-1

这确实是一个选择器问题。加号是相邻兄弟选择器，但在您的第一个示例中，span没有兄弟。在您的第二个示例中，它后面跟着一个div，因此选择器按预期工作。

- Christopher

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Coker · Accepted Answer

在你的第一个示例中，span 嵌套在 div 中，在第二个示例中没有。 + 选择器是相邻兄弟选择器。意思是它选择与之相邻的下一个元素。在你的第一个示例中，没有相邻的元素与 span 相邻。

为了使你的第一个示例起作用，你需要在紧邻 div div#testimonial1 的元素上设置 :hover 伪类，这将是它之前的 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>