CSS display block on hover

Question

I've following HTML, the div .info has display:none by default, I want to change that to display:block on hover. I'm trying following CSS but the :hover does not work.

HTML:

<div id="items">
    <div class="item">
        <a href="#">
            <div clas="info">

            </div>
        </a>
    </div>
</div>

CSS

#items .item a .info{
    display: none;
}

#items .item a .info:hover{
    display: block;
}

JSFiddle: http://jsfiddle.net/qcDtF/

Thanks.

Answer 1

You cannot hover over something that is not displayed. You could use opacity or visibility instead. jsFiddle.

.info {
   opacity: 0;
}

.info:hover {
    opacity: 1;
}

Alternatively, if you really want to use display:none, then give #items, .item, or your outer a a set width and height, and place the :hover on that element. jsFiddle. For example:

#items{
    width: 20px;
    height: 20px;
}


.info{
    display: none;
}


#items:hover .info {
     display: block;  
}

If you want the correct width and height, you can use javascript/jQuery to get the width/height of a visible .info, hide .info, and then set the height/width of #items to those values gotten from .info.