Question

我有三个图像（例如tab1.jpg）以及鼠标悬停图像（例如tab1m.jpg），我正在尝试将其缩减为单个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）图像。谁能告诉我为什么会这样？谢谢！

Answer 1

这是两个不同的功能，有两个不同的范围。你不能在第二个中访问其中一个声明的变量。

在悬停（）之外声明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');
    }
);

Answer 2

如何使用一些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”选择器，您可以将悬停功能添加到您想要的任何元素。

Answer 3

它不会恢复为原始版本，因为在第二个函数中，变量选项卡未定义。

你可以添加

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

在你的第二个功能中解决问题

JQuery悬停功能无法正常工作

3 个答案: