using hover on a div not working

Question

You can visit the site here (click "portfolio" to get to the relevant part for this question).

I am trying to set up a title to appear when an image is hovered over. I formatted the images as well as the text to appear upon hovering. I set the div's visibility to hidden and used the hover tag to make it visible, but it refuses to reappear upon hovering. How can I make the div actually appear upon hovering?

Here's my HTML (just the first li to keep the post short)

<li>
  <a href="#openModal1">
    <div class="imgwrap">
      <img src="portfolio_images/poster.png">
      <div class="textwrap"><p class="imgdes">Pedalfest Poster</p></div>
    </div>
  </a>
</li>

And the CSS

.imgwrap {
height:150px; width:150px;
}

.textwrap {
position:absolute;
width:150px; height:30px;
background-color:#727272;
margin-top:-30px;
visibility: hidden;
}

.imgdes {
text-align:center; font-family: Droid serif, serif;
font-weight:500; font-size:14px;
line-height:30px;
text-decoration:none; color:#f7f7f7;
top:50%;
}

.textwrap:hover {
visibility: visible;
}

You can't hover over a visibility: hidden or display: none styled element as there is nothing for the mouse to hover over. — Adam Zuckerman
– Adam Zuckerman, Commented Apr 16, 2014 at 1:42
try using javascript onmouseover="function()"... to show/hide the description box. — JRulle
– JRulle, Commented Apr 16, 2014 at 1:43
i think you should try this for better animation effect when hovered. check this out geekgirllife.com/… — shin
– shin, Commented Apr 16, 2014 at 2:04

Sam G-H · Accepted Answer · 2014-04-16 01:57:27Z

1

Try changing the visibility when you hover over the container. You can do something like:

.imgwrap:hover .textwrap {
     visibility: visible;
}

You are simply using the hovering over the imgwrap class to control the properties of textwrap. Essentially you are just using the hovering over the parent but then specifying a child; in this case, textwrap. Since you can't hover over an element that is hidden, we hover over it's parent, which is the area over which we want to be able to hover anyway.

edited Apr 16, 2014 at 1:57

answered Apr 16, 2014 at 1:45

Sam G-H

6278 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sam G-H Over a year ago

Just did. Does that help?

tfhall4 Over a year ago

This works exactly as I need it to. I will mark as correct as soon as the time limit expires.

Sam G-H Over a year ago

@bjb567 It is exactly because of what Adam said in the first comment on the OP. You can't hover over an element that is hidden, so in this case, we want to use the parent, which is the exact area that we want to be able to hover over anyway.

bjb568 Over a year ago

@Sam So add that to your answer to make it complete.

Collectives™ on Stack Overflow

using hover on a div not working

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related