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;
}
Share
Improve this question
asked Jan 20, 2013 at 8:15
MattMatt
1633 silver badges10 bronze badges
2
- 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
Reset to default 3Given 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