Question

我想在悬停链接时更改图片来源。

在此页面上：https://www.desaunois.nl/menu-opbouw/主菜单包含不同的项目。

当您将鼠标悬停在“ Over ons”上时，会出现一个子菜单，旁边有一张图片。图片与“ Geschiedenis”项目有关。例如，当我将鼠标悬停在子项目“ FAQ”上时，我希望在鼠标悬停时更改左侧的图片。如何使用jQuery实现此目标？

Answer 1

这是你的答案

只需尝试一下此片段

$('img').on('mouseenter', function() {
    $('img').attr('src', "http://via.placeholder.com/100x100")
})
$('img').on('mouseleave', function() {
    $('img').attr('src', "https://dummyimage.com/100x100/000/fff")
})

https://jsfiddle.net/yashgulati/wn9bz285/4/

，下面是生效的淡入淡出是链接。

https://jsfiddle.net/yashgulati/wn9bz285/9/

Answer 2

您只需在JQuery中为这些项目声明一个mouseover事件并更改图像即可。我可以看到您在导航栏中使用了唯一的类名。但我建议您使用id。但是我创建了这段代码。假设“ myIMG”是图像的ID，“ class1”是您在导航项目中使用的类。因此，用于更改“ myIMG” div中的图片的代码是

$('.class1').mouseover(function(){   
    $("#myIMG").attr("src","https://via.placeholder.com/350x125");
   });

JSFiddle链接以获取详细信息：https://jsfiddle.net/v8rL307a/10/

悬停其他元素时更改img

2 个答案: