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: /

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;
 }

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/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;
 }

• javascript
• jquery
• html
• css

• You can use css hover selector and you can use show()/hide() functions on some jQuery event. It's better to use the css. – gotqn Commented Jan 20, 2013 at 8:24
• Don't do it with javascript please. Do it with CSS as you said. It's faster. – Muqito Commented Jan 20, 2013 at 8:40

4 Answers 4

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/ceTdA/4/

You should try this code:

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

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;
}

add this css:

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

here is working jsfiddle