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>