CODEWITHSUNDEEP
csstwitter-bootstraphovertwitter-bootstrap-3
user2512696
user2512696

Reputation: 325

Showing Div on Hover over img (Bootstrap 3)

Using CSS I am running into trouble getting a div later on the page to show up using the hover command over an img tag. I'm writing the page using Bootstrap 3 - Any idea why this may be a problem? The words in "hovershow" appear at the right spot on the page when they are not originally hiden using CSS which makes me think there's a problem with the command itself.

HTML

<div class="col-md-4 col-sm-4">
    <img id="Email_Logo" class="featurette-image img-responsive" src="img/Email_Icon_Send1.jpg" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>

<div class="row">
    <div class="col-md-6 col-md-offset-3">
    <div class="hovershow"><p>This should show on hover</p></div>
</div>
</div>

CSS

.hovershow{
    display:none;
}

#Email_Logo:hover .hovershow{
    display: block;
}

Upvotes: 0

Views: 3024

Answers (1)

Luuuud
Luuuud

Reputation: 4439

That's definitely not how CSS works.

The following CSS implies there is an element .hovershow somewhere within #Email_Logo:

.#Email_Logo:hover .hovershow{
    display: block;
}

And well... that's not the case. What you want can either be achieved by some easy Javascripting or a change in your HTML 'tree' and CSS.

Upvotes: 3

Related Questions