[英]Jquery active on hover only when the mouse is on the div
So I have a slideup footer, but If I go fast with the mouse over the div, it happens just a jump of the div, but I want also want to display the content, I created a video HERE: http://screencast.com/t/CDQUDQP3 so you can understand it better, If I hover over with the mouse a lil bit slower it works fine. 因此,我有一个页脚页脚,但是如果我将鼠标快速移到div上,它只是在div上跳了一下,但是我还想显示内容,因此我在此处创建了一个视频: http:// screencast。 com / t / CDQUDQP3,这样您就可以更好地理解它。如果我将鼠标悬停一点,速度会变慢。
Here is my code: 这是我的代码:
var $footer = $('footer'),
$footerHeader = $('.footer-header'),
$footerDisplay = $('.footer-display'),
$totalHeight = ((parseInt($footerDisplay.css('height'))) + 50)+'px';
$('footer').stop(1,1).hover(function(){
//mouse in
$footerHeader.css('visibility','hidden');
$footerDisplay.stop(1,1).slideUp(function(){
$(this).show();
$footer.css('height',$totalHeight);
});
$footer.stop(1,1).animate({'margin-top':'-'+$totalHeight});
},function(){
//mouse out
$footer.stop(1,1).animate({'margin-top': '-57px','height':'57px'});
$footerDisplay.stop(1,1).slideUp();
$footerHeader.css('visibility','visible');
});
And HTML: 和HTML:
<footer>
<div class="footer-header">
<h3>
<span class="sprite arrow-footer"><!-- dirty hack--></span>
OPEN
</h3>
</div><!--end footer-header-->
<div class="footer-display clearfix">
<?php dynamic_sidebar("the_footer"); ?>
</div><!-- end footer-display-->
</footer>
You need hoverIntent, a jquery plugin. 您需要hoverIntent,一个jQuery插件。 from the docs :
从文档:
hoverIntent is a plug-in that attempts to determine the user's intent... like a crystal ball, only with mouse movement!
hoverIntent是一个插件,它试图确定用户的意图……就像一个水晶球一样,只需要鼠标移动即可! It works like (and was derived from) jQuery's built-in hover.
它的工作方式与jQuery的内置悬停类似(并从中派生)。 However, instead of immediately calling the onMouseOver function, it waits until the user's mouse slows down enough before making the call.
但是,它不会立即调用onMouseOver函数,而是会等到用户的鼠标速度足够慢后再进行调用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.