0

div 'person-wrap' にカーソルを合わせたときに表示されるボタンを含む非表示の div があります。これどうやってするの？CSS トリックを使用する必要がありますか、それとも JQUERY で実行できますか?

JSFIDDLE: http://jsfiddle.net/ceTdA/3/

表示したいdiv：

#buttons {
display: none;
    position:absolute;
    right:10px;
    top:10px;
margin: 0px 0px 0px 0px;
height: 30px;
width: 225px;
overflow: auto;
 }
4

4 に答える 4

3

#buttonsあなたのdiv があなたの子であることを考えると、#person-wrapCSS だけでそれを行うことができます:

#person-wrap:hover #buttons {
    display : block;
}

デモ: http://jsfiddle.net/ceTdA/4/

于 2013-01-20T08:35:25.770 に答える
2

次のコードを試してください。

$("#person-wrap").hover(function() {
    $(this).find('#buttons').show();
}, function() {
    $(this).find('#buttons').hide();
});
于 2013-01-20T09:26:51.497 に答える
1

nnnnnn は、最良の純粋な css の方法を説明していますが、jQuery でも非常に簡単です。マウスがホバリングしているときに最初の関数を呼び出し、マウスが離れたときに 2 番目の関数を呼び出すだけです。

$("#person-wrap").hover(
    function () {
        $("#buttons").addClass("hover");
},
    function () {
        $("#buttons").removeClass("hover");
});

そして単純なcss：

.hover{
    display:inline;
}
于 2013-01-20T08:23:23.623 に答える
0

この CSS を追加します。

#profile-pic:hover #buttons{
     display:inline;
}

ここでjsfiddleが動作しています

于 2013-01-20T09:25:59.023 に答える