CSS on hover show content

Question

I'm kicking myself here as I've done this plenty of times before, but for some reason my code is not working and I can't workout why. I've been staring at it for a while now so that probably doesn't help. Anyway I'm trying to do a CSS on hover. So when you hover over a div with it displays another div.

HTML

<div class="pressListItem">
   <img src="" width="" height="">
   <h3>July 2013</h3>
</div>
<div class="pressItemHover">
   <p>This is come more content, lalala here is a little snippet</p>
   <span></span>
   <span>Read more</span>
</div>

CSS

I'm using the opacity transition as I want it fade in.

.pressItemHover{
    opacity: 0;
    transition: opacity 0.5s linear 0s;
    visibility: hidden; 
}

.pressListItem:hover .pressItemHover{
    opacity: 1;
    visibility: visible;
}

.pressListItem{
    width: 200px;
    float: left;
    height: 200px;
    margin-right:12px;
    text-align: center;
    border: solid 1px #e4e4e4;      
}

If anyone could point out what I'm doing wrong it would be much appreciated!

score 4 · Accepted Answer · answered Oct 04 '13 at 18:28

4

Change the selector to:

.pressListItem:hover + .pressItemHover {
    opacity: 1;
    visibility: visible;
}

jsFiddle example

.pressListItem:hover .pressItemHover looks for an element with the class pressItemHover that is a descendant of pressListItem when in reality it's a sibling, in which case you want to use the adjacent sibling selector +.

answered Oct 04 '13 at 18:28

j08691

204,283
31
260
272

1+ It works, but it's really glitchy.. It flickers - in Chrome anyways – Josh Crozier Oct 04 '13 at 18:29
Perfect thank you! I even tried using the > but the + seems to have done the trick! Thank you!! – JDavies Oct 04 '13 at 18:30
@JoshC ok thanks, i'll do some testing, probably need to play with the CSS – JDavies Oct 04 '13 at 18:30
`>` is the child (immediate descendant) selector, so that wouldn't have worked either (as you saw). – j08691 Oct 04 '13 at 18:30

score 0 · Answer 2 · answered Oct 04 '13 at 18:29

In your HTML .pressListItem and .pressItemHover are siblings. In your CSS you're defining styles to a div which is a child of .pressListItem. You need to change HTML to this

<div class="pressListItem">
    <img src="" width="" height="">
    <h3>July 2013</h3>

    <div class="pressItemHover">
        <p>This is come more content, lalala here is a little snippet</p>
        <span></span>
        <span>Read more</span>
    </div>
</div>

or if you don't wan't to restructure your DOM you can just change this part of CSS

.pressListItem:hover + .pressItemHover {

CSS on hover show content

2 Answers2

Linked