JQuery悬停功能无法正常工作

我有三个图像（例如tab1.jpg）以及鼠标悬停图像（例如tab1m.jpg），我试图减少为单个JQuery悬停功能。在我使用之前：JQuery悬停功能无法正常工作

$('#tab1').hover(function(){ 
    $(this).attr("src", 'images/tab1m.jpg'); 
}, 
function(){ 
    $(this).attr("src", 'images/tab1.jpg'); 
}); 
$('#tab2').hover(function(){ 
    $(this).attr("src", 'images/tab2m.jpg'); 
}, 
function(){ 
    $(this).attr("src", 'images/tab2.jpg'); 
}); 
$('#tab3').hover(function(){ 
    $(this).attr("src", 'images/tab3m.jpg'); 
}, 
function(){ 
    $(this).attr("src", 'images/tab3.jpg'); 
});

哪些工作，但不必要的漫长而冗长。所以我试图将其更改为：

$('.navimg').hover(function(){ 
    var tab = ($(this).attr('id')).substring(3,4); 
    $(this).attr('src','images/tab'+tab+'m.jpg'); 
}, 
function(){ 
    $(this).attr('src','images/tab'+tab+'.jpg'); 
});

它一直没有工作 - 当我鼠标移到它成功地变化，但不会恢复到原来的（tab1.jpg/TAB2/TAB3）图像的图像。谁能告诉我为什么会发生这种情况？谢谢！

来源

2012-02-14 Tim Aych

你可以发布相关的HTML吗？另外，你可以使用CSS实现同样的效果，并完全跳过jQuery。 – arb 2012-02-14 13:49:28

它不会恢复到原来的，监守在你的第二个函数变量标签是取消定义。

，你可以在你的第二个函数添加

var tab = ($(this).attr('id')).substring(3,4);

解决问题

来源

2012-02-14 13:50:44 Nettogrof

啊！我知道这很简单。谢谢！！！ – 2012-02-14 13:52:03

这是两个不同的功能与两个不同的范围。你不能访问第二个变量中声明的变量。

让你的宣言var tab悬停（）外，使它在两个内部函数访问：

var tab = ''; 

$('.navimg').hover(
    function(){ 
     tab = ($(this).attr('id')).substring(3,4); 
     $(this).attr('src','images/tab'+tab+'m.jpg'); 
    }, 
    function(){ 
     $(this).attr('src','images/tab'+tab+'.jpg'); 
    } 
);

来源

2012-02-14 13:48:23

我发现我需要两个函数中的var选项卡，就好像我将它保留在图像之外，而不是原始图像，而是恢复为“'”。 – 2012-02-14 13:52:59

如何使用一些CSS？

#tab1{background-image: url(/images/tab1m.jpg)} 
#tab1.hover{background-image: url(/images/tab1.jpg)} 
#tab2{background-image: url(/images/tab2m.jpg)} 
#tab2.hover{background-image: url(/images/tab2.jpg)} 
#tab3{background-image: url(/images/tab3m.jpg)} 
#tab3.hover{background-image: url(/images/tab3.jpg)}

那么你JQuery的悬停可以是：

$('.canHover').hover(function(){ 
    $(this).addClass('hover'); 
}, 
function(){ 
    $(this).removeClass('hover'); 
});

然后在每个你的 '标签' 添加 'canHover' 类

<div id="#tab1" class="canHover">Tab 1</div> 
<div id="#tab2" class="canHover">Tab 2</div> 
<div id="#tab3" class="canHover">Tab 3</div>

使用上述CSS和“canHover的“选择器可以将悬停功能添加到任何你想要的元素。

来源

2012-02-14 14:03:56 harag

为什么使用JavaScript，只是CSS伪选择器'：悬停' – 2012-02-14 14:05:18

你可以，我忘记了'：hover'伪选择器 – harag 2012-02-14 14:13:45

JQuery悬停功能无法正常工作

回答

相关问题