Javascript/Jquery 图像悬停效果

Question

嗨，我尝试为网页制作图像悬停效果，我需要帮助的是，当我将鼠标悬停在一张图像上时，我希望其他图像更改不透明度（淡出一点），因此悬停的图像会吸引用户的注意力。 欢迎任何帮助。

谢谢

Answer 1

悬停在当前图像上：

$('.class/#id').on('mouseover', function() {
    $(this).fadeTo('slow', 0.5);
});

将鼠标悬停在当前图像上：

$('.class/#id').on('mouseout', function() {
    $(this).fadeTo('slow', 1.0);
});

将鼠标悬停在当前图像上但淡出其他图像：

$('.class/#id').on('mouseout', function() {
    $('img').fadeTo('slow', 0.5);
    $(this).fadeTo('fast', 1.0);
});

将鼠标悬停在当前图像上但淡出其他图像：

$('.class/#id').on('mouseover', function() {
    $('img').fadeTo('slow', 1.0);
    $(this).fadeTo('fast', 1.0);
});

Answer 2

我会使用类似的东西：

$('img').mouseover(function(){

    $('img').fadeTo("slow", 0.5);
    $(this).fadeTo("slow", 1);

});

Answer 3

为什么不从一开始就让它们全部消失。 然后当你将鼠标悬停在元素上时，让它的不透明度更高，它会脱颖而出。

您想要的效果可能不会使图像脱颖而出，因为用户无论如何都会将注意力集中在他们悬停的图像上。 我建议您在此处尝试我的建议和其他一些代码来演示两者并查看哪个最能实现您希望达到的目标。

如果您愿意，您可以使用纯 CSS 或 JavaScript 和 jQuery 来实现这一点。

这是一个纯 CSS 示例。

<div class="nav">
<a href="somefile.html"><img src'image1.png'/></a>
<a href="somefile.html"><img src'image1.png'/></a>
</div>
<style type="text/css">
.nav a img {opacity:0.5;}
.nav a:hover img {opacity:1;}
</style>