鼠標懸停更改圖片顏色

我有一個很大的圖像網格。當用戶鼠標懸停圖像時，我想讓圖像着色藍色0000FF。有沒有辦法在JS或jQuery中做到這一點？理想情況下，我不必爲每個圖像應用一個類。這種處理應該會影響屏幕上的所有圖像。鼠標懸停更改圖片顏色

在搜索這裏和其他地方的論壇後，我瞭解到有些人使用具有顏色和不透明度的圖像上的div，但是我如何將它應用於所有img？

我看到的另一件事是paintbrushJS和pixastic，但我不知道如何使這些工作爲此目的。

這裏是我工作的頁面： http://www.rollinleonard.com/elements/

編輯：圖片必須是可點擊所以DIV不能妨礙聯IMG。有沒有辦法點擊div或將div放在下面？提供的一些解決方案不使用div，但我無法弄清楚。

謝謝！ Rollin

來源

2011-03-03 Rollin

這是你自己是怎麼想這樣做：http://jsfiddle.net/ztKJB/1/

使用Javascript/jQuery的：

$overlay = $('#overlay'); 

$('img').bind('mouseenter', function() { 
    $this = $(this); 
    if ($this.not('.over')) { 
     $this.addClass('over'); 
     $overlay.css({ 
      width : $this.css('width'), 
      height : $this.css('height'), 
      top : $this.offset().top + 'px', 
      left : $this.offset().left + 'px', 
     }).show(); 
    } 
}).bind('mouseout', function() { 
    $(this).removeClass('over'); 
});

CSS：

#overlay { 
    display: block; 
    position: absolute; 
    background-color: rgba(0, 0, 255, 0.5); 
    top: 0px; 
    left: 0px; 
    width: 0px; 
    height: 0px; 
}

HTML：

<div id="overlay"></div> 
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/rgb-dots-olan3.jpg" width="150" height="150"> 
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/rgb-dots-olan2.jpg" width="150" height="150"> 
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/IMG_3291.jpg" width="225" height="150"> 
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/1153-1188.jpg" width="200" height="150"> 
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/P1010036.jpg" width="200" height="150"> 
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/dressRehearsal.jpg" width="267" height="150"> 
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/sinWave.jpg" width="225" height="150" 
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/mockUp2.jpg" width="225" height="150"> 
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/PICT0453.jpg" width="113" height="150">

來源

2011-03-03 19:11:15 McHerbie

哇，謝謝！我在這裏得到一個真正的教育在stackoverflow。我把這一切都發現在Flash中，但結果太重了，並且不容易更新。把我的網站拼湊在一起，真的讓我大開眼界。 – Rollin 2011-03-03 20:35:25

這似乎並沒有刪除'mouseout'中的覆蓋... – mellamokb 2011-03-03 20:55:02

雖然我有一個問題...現在鏈接不可點擊，因爲div覆蓋它。有沒有辦法避免這個問題？我更新了該頁面。 – Rollin 2011-03-03 21:20:05

在圖像上使用div的想法可行。您可以生成即時需要的股利（或生成一個隱藏的div整個頁面重用），和onmouseover事件期間，它的位置在圖像：

$('img').mouseover(function() { 
    // generate a div 
    // position over current image 
});

來源

2011-03-03 19:01:28 mellamokb

感謝您的解釋。我認爲McHerbie就是這樣做的，對吧？ – Rollin 2011-03-03 20:44:05

@Rollin：是的。他的回答很棒！ – mellamokb 2011-03-03 20:53:10

你對roryf的回答有什麼看法？在保持鏈接的同時，我似乎無法讓McHerbie的工作成功。該div隱藏鏈接。 – Rollin 2011-03-03 22:20:55

你可以在這裏找到答案jQuery: there is a way to apply colour (tint) to an image?

來源

2011-03-03 19:02:24

附加一個span每個錨內，並調整它在懸停不透明度：

<script> 
$(function() { 
    $('a').each(function() { 
     $(this).appendChild('<span class="overlay" />'); 
    }); 
}); 
</script> 

<style>  
    a { 
     position: relative; 
    } 

    a .overlay { 
     background-color: #00f; 
     height: 100%; 
     left: 0px; 
     opacity: 0; 
     position: absolute; 
     top: 0px; 
     width: 100%; 
    } 

    a:hover .overlay { 
     opacity: 0.4; /* adjust to suit */ 
    } 
</style>

注意：您需要調整你的風格，所以錨點是float編輯而不是圖像。

如果你想淡入/淡出，你既可以使用CSS3 transitions或隱藏span最初並使用一個jQuery鼠標懸停事件褪色它：

$('a').each(function() { 
    $(this).appendChild($('<span class="overlay" />').hide()).hover(function() { 
     $(this).find('.overlay').fadeIn(500); 
    }, function() { 
     $(this).find('.overlay').fadeOut(1000); 
    }); 
});

來源

2011-03-03 19:11:43 roryf

看起來很棒。我只是無法讓它工作。我試着在這裏部署你的解決方案：http://www.rollinleonard.com/elements/index3.php你認爲我搞砸了什麼？ – Rollin 2011-03-03 21:33:38

你需要把它放在一個document.ready處理程序中，會更新答案 – roryf 2011-03-04 09:37:00

這個jQuery插件應該做的你問的事很不錯。（tancolor.js）

$("#myImageID").tancolor({mode: "blue"});

有一個互動demo。你可以玩它。

查看關於使用的文檔，它非常簡單。docs

來源

2013-11-12 15:22:51

鼠標懸停更改圖片顏色

回答

相關問題