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懸停功能無法正常工作

回答

相關問題