0

我有一个带有按钮的隐藏 div，当您将鼠标悬停在 div 'person-wrap' 上时，我希望它出现。我怎样才能做到这一点？我应该使用 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

鉴于您的#buttonsdiv 是您的孩子，#person-wrap只需 CSS 即可：

#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 也很简单，它所做的只是在鼠标悬停时调用第一个函数，当鼠标离开时调用第二个函数。

$("#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 回答