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来实现这一点。

这是一个纯粹的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>