在悬停时显示隐藏的div

Question

I have a hidden div with a buttin that I would like to appear when you hover over the div 'person-wrap'. How can I do this? Should I use CSS tricks or can it be done with JQUERY?

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

The div I would like to have appear:

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

Answer 1

Given that your #buttons div is a child of #person-wrap you can do it with just CSS:

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

Demo: http://jsfiddle.net/ceTdA/4/

Answer 2

You should try this code:

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

Answer 3

nnnnnn explains a pure css way which is best, but it's pretty simple with jQuery as well, all it does is call the first function while the mouse is hovering and the second when the mouse leaves.

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

And simple css:

.hover{
    display:inline;
}

Answer 4

add this css:

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

here is working jsfiddle