CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3css-selectors
Ben Jones
Ben Jones

Reputation: 525

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?

Upvotes: 4

Views: 2516

Answers (4)

Michael Benjamin
Michael Benjamin

Reputation: 371331

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?

Upvotes: 1

atomCode
atomCode

Reputation: 902

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>

Upvotes: 0

Christopher
Christopher

Reputation: 876

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.

Upvotes: -1

Michael Coker
Michael Coker

Reputation: 53684

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>

Upvotes: 2

Related Questions