Ben Jones Ben Jones - 1 year ago 32
CSS Question

Getting hover to work on a nested element

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 Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download