Question

我正在尝试为我的网站编辑此代码。现在，在悬停时它会激活图像上的叠加层。我想添加它，以便除了激活叠加外，它还会改变身体的背景颜色。这可以在这段代码中完成，还是比我想象的更多的工作？谢谢！

jQuery('.images').hoverIntent(function() {
    jQuery(this).find('.title-wrap').stop().each(function() {
      jQuery(this).animate({
        width: jQuery(this).data('wrapping')
      }, 150);
    });

Answer 1

配置hoverIntent的一种方法是使用2个函数作为参数....每个mouseenter和mouseleave一个。

对于正文，只需切换一个类并在css规则中设置背景

function hoverIn(){
   $('body').addClass('different-background-class');
   jQuery(this).find('.title-wrap').stop().each(function() {
      jQuery(this).animate({
        width: jQuery(this).data('wrapping')
      }, 150);

}

function hoverOut(){
   $('body').removeClass('different-background-class');
   jQuery(this).find('.title-wrap').stop().width('auto');

}
// pass the 2 function references as arguments
jQuery('.images').hoverIntent(hoverIn,hoverOut);

我不确定你是否在此动画之前定义了宽度。如果是这样，我们可以将初始值存储在hoverIn()函数中，以便在hoverOut()中重置它。我使用auto假设它未设置为正常状态

需要帮助编辑一些javaScript / jQuery - 悬停意图

1 个答案: