Question

我有一个jquery脚本使用.hover而不是1 mouseover和1 mouseout，但它有一个轻微的缺陷，.hover的mouseover位工作，但mouseout没有。

图像在鼠标悬停时淡入100％不透明度，并更改背景图像，然后在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); 
 });
});

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

Answer 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);
    })
});

Answer 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);   
        }); 
    }
);

Answer 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个。

确保制作正确的换行符和间距，以便您可以轻松查看代码。可读性的好处超过了少量额外字节的缺点。

Answer 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
);

Answer 5

好的..看Shaz的回答！认为他是正确的。因为$('.web')

的孩子，我正在考虑$('#navweb')

您在此处执行的操作是在hover上设置$("#navweb")功能，但将功能放在$(".web")的{{1}}功能上：

each

当悬停时不需要每个都在jQuery对象中抛出每个HTMLElement $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); }); });

$(".web")

如果$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这些是特殊的jQuery事件。因此辅助函数执行此操作：

mouseleave

您还可以使用$(element).bind("mouseenter mouseleave", function(event) { if ( event.type == "mouseenter" ) { // calls first function } else { // calls second function } });只附加一个功能：

hover

对不起，我有点累了，希望你明白！

安德烈亚斯

jquery .hover问题

5 个答案: