Question

我有一个隐藏的div，当你将鼠标悬停在div'人物包裹'上时，我想要出现。我怎样才能做到这一点？我应该使用CSS技巧还是可以使用JQUERY来完成？

我想出现的div：

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

Answer 1

鉴于您的#buttons div是#person-wrap的孩子，您只需使用CSS即可：

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

演示：http://jsfiddle.net/ceTdA/4/

Answer 2

您应该尝试以下代码：

$("#person-wrap").hover(function() {
    $(this).find('#buttons').show();
}, function() {
    $(this).find('#buttons').hide();
});

Answer 3

nnnnnn解释了一种最好的纯css方式，但是jQuery也很简单，它只是在鼠标悬停时调用第一个函数，在鼠标离开时调用第二个函数。

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

简单的css：

.hover{
    display:inline;
}

Answer 4

添加此css：

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

此处正在运作jsfiddle

在悬停时显示隐藏的div

4 个答案: