I'm facing a problem with my javascript/jquery.
I have a div at the bottom of my screen, when I hover on it, I want that a div is coming up and stay there when i'm with my mouse at it. When I go out of the box then it should collapse again. My html:
<div id="footer">
<div id="howitworksBtn">
How it works
</div>
<div id="howitworksContent">
Second box
</div>
</div>
And my Javascript, It's not working yet so please help!
$("#howitworksBtn").hover(function () {
$(this).parent().find("#howitworksContent").stop().slideToggle("slow");
});
EDIT:
My css:
#howitworksBtn {
width: 220px;
height: 20px;
margin: auto;
text-align: center;
background-color: gray;
-moz-border-radius: 15px 15px 0 0;
border-radius: 15px 15px 0 0;
}
#howitworksContent {
margin: 0;
display: none;
background-color: gray;
color: white;
text-align: center;
font-size: 3em;
font-family: helvetica;
}
#footer {
width: 100%;
position: absolute;
bottom: 0;
}
It is surprisingly very simple.. :)
$("#howitworksBtn").parent().hover(function () {
$(this).find("#howitworksContent").slideToggle("slow");
});
hover takes 2 functions as parameters:
.hover() jQuery API documentation
$("#howitworksBtn").hover(
function () {
$(this).parent().find("#howitworksContent").stop().slideToggle("slow");
},
function () {
$(this).parent().find("#howitworksContent").stop().slideToggle("slow");
}
);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.