悬停功能

hover out function

本文关键字：功能 悬停      更新时间：2023-09-26
jQuery("#markets_served").hover(function(){
    jQuery.data(document.body, "ms_height", jQuery(this).height());
    if(jQuery.data(document.body, "ms_height") == 35) {
        jQuery(this).stop().animate({height:'195px'},{queue:false, duration:800, easing: 'easeOutQuad'});
        jQuery("#btn_ms_close").css("display","inline");
    }
});
jQuery("#btn_ms_close").hover(function(){
    jQuery.data(document.body, "ms_height", jQuery("#markets_served").height());
    jQuery("#markets_served").stop().animate({height:'35px'},{queue:false, duration:800, easing: 'easeOutQuad'});
    jQuery(this).css("display","none");
});

悬停的问题。它行不通。当鼠标不在悬停时显示的内容时，它不会悬停。

http://uscc.dreamscapesdesigners.net/- 底部的示例"覆盖的市场"

看看jQuery网站上的悬停声明。您可以一举为鼠标悬停和鼠标退出事件指定处理程序。无需计算高度或将另一个处理程序绑定到出现的新div。

$("#markets_served").hover(
  function () {
    //do this when over
  },
  function () {
    //do this when out
  }
);

使用如下：

$('#el').hover(function(e) { /* hover; */ }, function(e) { /* unhover */ });

这是文档

或者更简单，没有数据：

jQuery("#markets_served").hover(function() {
    jQuery(this).stop().animate({height:'195px'},{queue:false, duration:800, easing: 'easeOutQuad'});
    jQuery("#btn_ms_close").css("display","inline");
}, function() {
    jQuery(this).stop().animate({height:'35px'},{queue:false, duration:800, easing: 'easeOutQuad'});
    jQuery("#btn_ms_close").css("display","none");
});

当鼠标进来时，您会增加div 的高度，但当鼠标在div 之外时不会重置它，因此出现问题。

你应该做这样的事情：

jQuery("#markets_served").hover(
    function(){
        jQuery.data(document.body, "ms_height", jQuery(this).height());
        if(jQuery.data(document.body, "ms_height") == 35) {
            jQuery(this).stop().animate({height:'195px'},{queue:false, duration:800, easing: 'easeOutQuad'});
            jQuery("#btn_ms_close").css("display","inline");
        } , 
    function(){
            jQuery.data(document.body, "ms_height", jQuery("#markets_served").height());
            jQuery(this).stop().animate({height:'35px'},{queue:false, duration:800, easing: 'easeOutQuad'});
            jQuery("#btn_ms_close").css("display","none");
        }

    });
相关文章：