6

私はHTMLをフォローしていますが、div.infoにはデフォルトでありますが、ホバーdisplay:none時に変更したいと思います。display:blockCSSをフォローしようとしていますが、:hover機能しません。

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/

ありがとう。

4

3 に答える 3

21

表示されていないものにカーソルを合わせることができません。代わりに、不透明度または可視性を使用できます。jsFiddle。

.info {
   opacity: 0;
}

.info:hover {
    opacity: 1;
}

または、本当に使用したい場合は、、、、またはアウターに設定された幅と高さを指定し、その要素にを配置display:noneし#itemsます。jsFiddle。例えば：.itema:hover

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


.info{
    display: none;
}


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

正しいwidthとheightが必要な場合は、javascript / jQueryを使用して、表示の幅/高さを取得し.info、非表示.infoにしてから、の高さ/幅を#itemsから取得した値に設定できます.info。

于 2012-11-03T17:52:54.133 に答える
2

情報にコンテンツを表示していないため、非表示にカーソルを合わせることができません

あなたはこのようなことをすることができます

<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;
}

ホバーでこれを行うことはできませんが、ホバーで不透明度を変更して、ユーザー@jeffgortmakerが言うように非表示および表示されるように感じることができます。

aslo

オプションとしてjqueryがある場合は、次のように実行できます

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

jsFiddle

于 2012-11-03T17:48:50.110 に答える
1

visibilityの代わりに使用display：

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

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

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

于 2012-11-03T17:55:49.827 に答える