jquery .hover 问题答案

【问题标题】：jquery .hover issuejquery .hover 问题
【发布时间】：2011-08-10 16:56:46
【问题描述】：

我有一个 jquery 脚本来使用 .hover 而不是 1 mouseover 和 1 mouseout，但是它有一个小缺陷，.hover 的 mouseover 位有效，但 mouseout 没有。

图像在鼠标悬停时淡化为 100% 不透明度，并更改背景图像，然后在 mouseout 时，图像变回原始图像并且它也淡出，但是 mouseout 位不起作用并且图像不换回原来的并且不会褪色。

$j('#navweb').hover(function(){
$j(".web").each(function(){
 var i = parseInt(this.id.substr(2));
$j(this).css('background-image', 'url(back/' + i + 'col.png)').fadeTo('100', 1);}, 

function(){
$j(this).css('background-image', 'url(back/' + i + '.png)').fadeTo('100', 0.4); 
 });
});

我认为它只是一个小错误，但我无法在任何地方看到它。非常感谢所有响应者。

【问题讨论】：

标签： jquery hover

【解决方案1】：

我相信你想要的是这样的：

$j('#navweb').hover(function() {
    $j(".web").each(function() {
        var i = parseInt(this.id.substr(2));
        $j(this).css('background-image', 'url(back/' + i + 'col.png)').fadeTo('100', 1);
    })
}, function() {
    $j(".web").each(function() {
        var i = parseInt(this.id.substr(2));
        $j(this).css('background-image', 'url(back/' + i + '.png)').fadeTo('100', 0.4);
    })
});

【讨论】：

【解决方案2】：

这是您构建代码的方式。您目前只有鼠标悬停功能。

试试：

$('#navweb').hover(
    function(){ 
        $(".web").each(function(){  
            var i = parseInt(this.id.substr(2)); 
            $(this).css('background-image', 'url(back/' + i + 'col.png)').fadeTo('100', 1);
        });
    }, 
    function(){ 
        $(".web").each(function(){  
            var i = parseInt(this.id.substr(2)); 
            $(this).css('background-image', 'url(back/' + i + '.png)').fadeTo('100', 0.4);   
        }); 
    }
);

【讨论】：

我认为整个 }，function(){ 第 4-6 行称为 mouseout 函数？只是检查一下，我相信你是对的，我缺少一些括号
理论上它会（假设它的结构正确），但你在 $.each() 循环中，而不是 hover() 事件。
我明白了，我想我可以对两个部分使用相同的 (".web").each，我猜不是。感谢您的回复.....是的，我看到现在将您的结构与我的结构进行比较。我仍然在每个事件中。非常感谢。
这没有解决您的问题吗？除了被压缩并使用别名 $j（通常在使用其他 javascript 库时使用）和 $（默认别名）之外，我认为此解决方案与已接受的解决方案之间没有区别。

【解决方案3】：

当你以更易读的方式打开你的代码时，你可以看到问题：

$j('#navweb').hover(function(){
    $j(".web").each(function(){
        var i = parseInt(this.id.substr(2));
        $j(this).css('background-image', 'url(back/' + i + 'col.png)').fadeTo('100', 1);
    }, 
    function(){
        $j(this).css('background-image', 'url(back/' + i + '.png)').fadeTo('100', 0.4); 
    });
});

hover 处理程序需要 2 个参数，但只获取一个，而只接受一个参数的 each 方法需要 2 个。

确保进行适当的换行和间距，以便您可以轻松查看代码。可读性的好处超过了几个额外字节的缺点。

【讨论】：

【解决方案4】：

为了让事物淡出，第二个fadeTo调用的第一个参数应该是0，而不是100。另外，RobB是对的，格式不正确。试试这个

$j('#navweb').hover(
  function(){
    $j(".web").each(function(){
      var i = parseInt(this.id.substr(2));
      $j(this).css('background-image', 'url(back/' + i + 'col.png)').fadeTo('100', 1);
    }) // ends each function
  }, // ends 1st hover function
  function(){
    $j(this).css('background-image', 'url(back/' + i + '.png)').fadeTo('0', 0.4); 
  }  // ends 2nd hover function
);

【讨论】：

实际上第一个属性是持续时间，褪色不透明度是 0.4/1 :) 感谢您的回复。

【解决方案5】：

好的 .. 看看 Shaz 的回答！认为他是对的。我的正在穿上$('.web')，假设它是$('#navweb')的孩子

您在这里所做的是在$("#navweb") 上创建hover 函数，但将这些函数放在$(".web") 的each 函数上：

$j('#navweb').hover(function() {
    $j(".web").each(function() {
        var i = parseInt(this.id.substr(2));
        $j(this).css('background-image', 'url(back/' + i + 'col.png)').fadeTo('100', 1);
    },function() {
        $j(this).css('background-image', 'url(back/' + i + '.png)').fadeTo('100', 0.4);
    });
});

hover 时不需要每次都抛出 jQuery 对象 $(".web") 中的每个 HTMLElement

$j(".web").hover(function() {
        var i = parseInt(this.id.substr(2));
        $j(this).css('background-image', 'url(back/' + i + 'col.png)').fadeTo('100', 1);
    },function() {
        var i = parseInt(this.id.substr(2));
        $j(this).css('background-image', 'url(back/' + i + '.png)').fadeTo('100', 0.4);
    });
});

如果$(".web") 是$("#navweb") 的孩子，请这样做：

$("#navweb .web").hover(...

仅作记录：hover 添加到事件 mouseenter 和 mouseleave 这些是特殊的 jQuery 事件。因此有一个辅助函数可以这样做：

$(element).bind("mouseenter mouseleave", function(event) {
    if ( event.type == "mouseenter" ) {
        // calls first function
    } else {
        // calls second function
    }
});

您也可以使用 hover 只附加一个函数：

$(element).hover(function(event){
    if ( event.type == "mouseenter" ) {
        // do this
    } else {
        // do that
    }
});

对不起，我有点累了，希望你能理解！

安德烈亚斯

【讨论】：