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＆amp; amp;如果你愿意，可以使用jQuery。

这是一个纯CSS示例。