html - 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.

Answer 2

you have not display the content in info its not possible to hover the hidden

you can do something like this

<div id="items">
    <div class="item">
        <a href="#">sd
            <div class="info">
                asdf
            </div>
        </a>
    </div>
</div>

css

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

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

you can not do this by hover but you can change the opacity on hover so it feels like it will hide and show as the user @jeff gortmaker says

aslo

if you have jquery as option then you can do this like

$('.info').hover(function() {
    $(this).fadeTo(1,1);
},function() {
    $(this).fadeTo(1,0);
});

jsFiddle

Answer 3

使用visibility代替display：

#items .item .info {
    visibility: hidden;
}

#items .item:hover .info {
    visibility: visible;
}​

http://jsfiddle.net/qcDtF/1/