鼠標懸停的圖像發光？

Question

我已經看到了這種效果，當鼠標在圖像上時，該圖像發光。我不是在談論邊緣發光，我的意思是圖像中的顏色發光。我發現有一個名爲Pixastic的圖書館，可以在這裏看到輝光的影響。

http://www.pixastic.com/lib/docs/actions/glow/

是否有應用在圖像上鼠標懸停這個效果的方法嗎？我正在嘗試製作一個發光的按鈕。

謝謝！

Answer 1

你必須創建一個鼠標事件是這樣的：

$("img").hover(
    function() { 
    Pixastic.process($(this).get(0), "glow", {amount:0.5, radius:1.0}); 
    }, 
    function() { 
    Pixastic.revert($(this).get(0)); 
    } 
); 

當你與你的鼠標光標輸入圖像的第一功能被觸發。當鼠標離開圖像區域時調用第二個函數。這是需要重置圖像到其初始狀態。

Answer 2

你在找這樣的嗎？

Zurb Glow Button

對於所有鼠標的冒險，我想推薦這個

HoverAlls jquery plugin

Answer 3

正如您在Pixastic例子看到，demo()函數被調用上提交表單。

function demo() { 
    Pixastic.process(document.getElementById("demoimage"), "glow", { 
     amount : $("#value-amount").val(), 
     radius : $("#value-radius").val() 
    }); 
} 

因此，您可以在項目中包含glow.js並在懸停時調用此函數。

$('img.myimage').hover(function() { 
    Pixastic.process($(this), "glow", { 
     amount : 0.5, 
     radius : 0.5 
    }); 
}, function() { 
    Pixastic.process($(this), "glow", { 
     amount : 0, 
     radius : 0 
    }); 
}); 

或者revert()像sample顯示

Answer 4

嗨，你可以用CSS以及

請檢查現場演示給圖片上的發光鼠標懸停效果： -http://jsbin.com/inenet/12/edit

or you can read the tutorial of css hover effects