[英]Hover on slideToggle (2 divs)
I'm facing a problem with my javascript/jquery. 我的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. 我的屏幕底部有一个div,当我将它悬停在它上面时,我希望当我用鼠标在它上面时,div会出现并留在那里。 When I go out of the box then it should collapse again.
当我开箱时,它应该再次崩溃。 My html:
我的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! 而我的Javascript,它还没有工作,所以请帮忙!
$("#howitworksBtn").hover(function () {
$(this).parent().find("#howitworksContent").stop().slideToggle("slow");
});
EDIT: 编辑:
My css: 我的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需要2个函数作为参数:
.hover() jQuery API documentation .hover()jQuery API文档
$("#howitworksBtn").hover(
function () {
$(this).parent().find("#howitworksContent").stop().slideToggle("slow");
},
function () {
$(this).parent().find("#howitworksContent").stop().slideToggle("slow");
}
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.