在hover时显示隐藏的div

当你将鼠标hover在div’人物包裹’上时，我有一个隐藏的div和buttin。 我怎样才能做到这一点？ 我应该使用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; } 

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也很简单，只需要在鼠标hover时调用第一个函数，在鼠标离开时调用第二个函数。

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