鼠标悬停时图像发光

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

嗨，您可以使用CSS和来实现鼠标悬停时的图像辉光效果

请查看现场演示：-http://jsbin.com/inenet/12/edit

或者你可以阅读css悬停效果的教程

Answer 3

你在找这样的东西吗？

Zurb发光按钮

对于你所有的鼠标冒险，我想推荐这个

HoverAll jquery插件

Answer 4

如您在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()，就像样本显示一样