Question

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

这不起作用：

＆＃13;

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

＆＃13;

<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>

＆＃13;

然而这样做：

＆＃13;

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

＆＃13;

<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>

＆＃13;

我尝试了span.button之类的选择器，但我似乎无法找到正确的选择器来定位悬停效果的范围？

Answer 1

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

在第一个代码块中，span是div（.testimonial1h）的唯一子代。（我认为你的意思是.testimonial1。）

在第二个代码块中，span不是div的子节点，而是div的兄弟节点。

adjacent sibling combinator (+)（也称为 next-sibling selector ）定位一个紧跟另一个元素的元素。

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

它适用于第二个代码块，因为div#testimonial1是div的后代（你有div div#testimonial1），并且该div前面紧跟{{1兄弟姐妹。

如果你想让第一个代码块工作（即，当兄弟姐妹的孩子被徘徊时瞄准一个元素），那就不适用于CSS了。有关详细信息，请参阅此处：Is there a CSS parent selector?

Answer 3

您正在将苹果与橙子进行比较，因为您的第一个代码段html DOM结构与第二个不同，但您正在应用相同的CSS，但这样做无法正常工作。在你的第一个你有两个div作为跨度的父母。而在你的第二个跨度是身体的直接孩子。

试试这个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>

Answer 4

确实是选择器问题。加号是相邻的兄弟选择器，但在第一个示例中，span没有兄弟。在你的第二个例子中，后跟一个div，所以选择器按预期工作。

让鼠标悬停在嵌套元素

4 个答案: