鼠标悬停时图像发光？答案

【问题标题】：Image Glow on Mouse Hover?鼠标悬停时图像发光？
【发布时间】：2012-04-11 21:29:05
【问题描述】：

我见过这种效果，当鼠标悬停在图像上时，该图像会发光。我不是在谈论边框发光，我的意思是图像中的颜色会发光。我发现有一个名为 Pixastic 的库，可以在这里看到发光效果。

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

有没有办法将此效果应用于图像上的鼠标悬停？我正在尝试制作一个会发光的按钮。

谢谢！

【问题讨论】：

“我已经看到了这种效果，当鼠标悬停在图像上时，该图像会发光。” - 你在哪里看到的？

标签： jquery html css stylesheet pixastic

【解决方案1】：

你必须像这样创建一个鼠标悬停事件：

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

第一个功能在您使用鼠标光标输入图像时触发。当鼠标离开图像区域时调用第二个函数。这是将图像重置为其初始状态所必需的。

【讨论】：

【解决方案2】：

您好，您可以使用 CSS 以及

来赋予 鼠标悬停时图像发光效果

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

or you can read the tutorial of css hover effects

【讨论】：

【解决方案3】：

你在寻找这样的东西吗？

Zurb Glow Button

为了你所有的鼠标冒险，我想推荐这个

HoverAlls jquery plugin

【讨论】：

Zurb 发光按钮实际上是使用 css 颜色制作的。我正在尝试让图像（png）发光。
HoverAlls 看起来很酷，但那里也没有任何发光效果。还有其他想法吗？

【解决方案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() 就像sample 显示的那样

【讨论】：

这不会在 mouseleave 事件后重置发光效果
Hover 是 mouseenter 和 mouseleave 的快捷方式。更新了我的答案