jQuery - 懸停時改變顏色的亮度

HTML

<ul class="social-icons"> 
    <li><a href="#"><i class="facebook-icon"></i></a></li> 
    <li><a href="#"><i class="twitter-icon"></i></a></li> 
    <li><a href="#"><i class="googleplus-icon"></i></a></li> 
</ul>

CSS

.social-icons { 
    display:inline-block; 
    color:#FFF; 
} 

.facebook-icon { 
    background: #3b5998; 
} 

.twitter-icon { 
    background: #00aced; 
} 

.googleplus-icon { 
    background: #dd4b39; 
}

我們得到這個：

enter image description here

現在我想製作一個腳本，它可以在懸停時爲每個圖標增加背景顏色的亮度，而無需使用顏色代碼手動編寫懸停的新CSS線。

此外，我不想使用任何其他CSS方法，如不透明度，圖像蒙版或過濾器。它應該全部由JS完成。

來源

2014-09-25 Hann

沒有寫任何新的代碼，我不認爲這是可能的 – 2014-09-25 08:20:54

我相信，這可能是一個jQuery的方式來檢測圖標的背景顏色，然後增加該顏色的亮度不知何故... – Hann 2014-09-25 08:26:58

這應該是你想要什麼：

http://jsfiddle.net/u41qxo1e/

我創建輔助功能變暗/減輕（這一點，你不需要任何新的JS庫）

$(".social-icons li a i").hover( 
     function() { 
     //OnHover 
     $(this).css("background-color", LightenDarkenColor(rgb2hex($(this).css("background-color")), 20)); 
     }, function() {  
     //AfterHover 
     $(this).css("background-color", LightenDarkenColor(rgb2hex($(this).css("background-color")), -20)); 
     });

來源

2014-09-25 08:41:46 Xavjer

也許你會找到什麼您想在這裏：http://stackoverflow.com/questions/8287806/how-to-use-jquery-to-fade-in-out-li-ahover-css-background-color – Xavjer 2014-09-25 10:29:40

只使用的JavaScript可以參考這個前面的問題：

Increase CSS brightness color on click with jquery/javascript?

我希望它能幫助。

來源

2014-09-25 08:24:59

jQuery - 懸停時改變顏色的亮度

回答

相關問題