Getting hover to work on a nested element

Question

Bootstrap DIVs are stopping the CSS :hover from working. I think this is a selector issue?

This doesn't work:

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>

Yet this does:

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>

I have tried selectors like span.button etc but I can't seem to get the right selector to target the span for a hover effect?

Answer 1

In your first example, the span is nested in a div and in the second example, it isn't. the + selector is an adjacent sibling selector. Meaning it selects the next element it's adjacent to. There is no adjacent element to the span in your first example.

To get your first example to work, you need to set the :hover pseudo class on the element that is adjacent to the div div#testimonial1 you want to show, which would be the div that precedes it. Like this.

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>

Answer 2

In the first code block, the span is an only child of a div (.testimonial1h). (I think you mean .testimonial1.)

In the second code block, the span is not a child of a div, but a sibling of a div.

The adjacent sibling combinator (+) (also known as the next-sibling selector) targets an element that is immediately preceded by another element.

That's not going to work in the first code block, because the span has no siblings.

It works in the second code block because div#testimonial1 is a descendant of a div (you have div div#testimonial1), and that div is immediately preceded by a span sibling.

If you want the first code block to work (i.e., target an element when a sibling's child is hovered), that's not going to work with CSS. See here for details: Is there a CSS parent selector?