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?

score 2 · Accepted Answer · answered May 22 '17 at 23:58

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>

Thanks, was going mad ove rthis! So is there a way to do display on hover using only CSS (no jquery or JS) for non adjacent content? — Ben Jones, May 23 '17 at 00:01
When I'm done will be multiple content items in .arrow_box and the testimonials so adjacent isn't possible — Ben Jones, May 23 '17 at 00:03
@BenJones I doubt it. The main problem is CSS selectors can only affect elements that come after that element and down the DOM - a selector can't go back up the DOM or up the page to previous elements. However, the elements don't have to be *adjacent*. They can simply come after if you use the general sibling selector (`~`) instead of the adjacent sibling selector (`+`) - here's an example https://codepen.io/anon/pen/VbqQbY — Michael Coker, May 23 '17 at 00:15

Michael Benjamin · Answer 2 · 2017-05-23T13:58:58.697

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?

score 0 · Answer 3 · answered May 23 '17 at 00:07

You are comparing apples to oranges because your first code snippet the html DOM structure is different from the second yet your are applying the same CSS which is not going to work. On your first one you have two divs as the parents of the span. And on your second one the span is a direct child of the body.

Try this HTML structure, it should work.

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

score -1 · Answer 4 · answered May 22 '17 at 23:58

-1

It is indeed a selector issue. The plus sign is an adjacent sibling selector but in your first example span has no siblings. In your second example it is followed by a div so the selector works as expected.

answered May 22 '17 at 23:58

Christopher

688
6
16

Getting hover to work on a nested element

4 Answers4