如何使用JavaScript或jQuery使图像或按钮在鼠标悬停时发光？

Question

我想在鼠标悬停在按钮或图像上时添加发光效果。我该如何使用JavaScript、jQuery或CSS实现这个效果？以下是我想要的一个示例链接：http://www.flashuser.net/flash-menus/tutorial-flash-glow-buttons-menu.html。能否给我一些示例代码？谢谢提前。

- user701510

Answer 1

如果您不介意针对现代浏览器，可以使用CSS过渡和box-shadow属性，无需使用JS。

请查看这里的网站：
http://designshack.co.uk/articles/css/5-cool-css-hover-effects-you-can-copy-and-paste
(向下滚动直到看到 Fade-in 和 Reflect)

演示在这里： http://designshack.co.uk/tutorialexamples/HoverEffects/Ex5.html

- JordanC

---

除了提供参考链接外，您也可以直接提供答案，以防链接失效。 - Rubens Mariuzzo

Answer 2

永远没有发布Radioactive Buttons的坏时机，这是纯CSS3。只适用于Webkit浏览器（例如Chrome和Safari）。下面是一个修改过的版本，只有在悬停时才会发光，这样就不那么分散注意力了：

@-webkit-keyframes greenPulse {
  from { background-color: #749a02; -webkit-box-shadow: 0 0 0 #333; }
  to { background-color: #91bd09; -webkit-box-shadow: 0 0 18px #91bd09; }
}

a.green.button {
  background-color: #749a02;
  border-radius: 0.5em;
  color: #fff;
  padding: 0.5em;
  text-decoration: none;
}

a.green.button:hover {
  background-color: #91bd09;
  -webkit-animation-name: greenPulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-box-shadow: 0 0 18px #91bd09;
}

<a href="#" class="green button">Click Me</a>

jsFiddle演示。随着更多的浏览器采用它，它将使事情变得更容易，但在那之前，这只是JavaScript解决方案的附加组件。

- brymck

---

这也可以轻松地转录到其他浏览器中。 - Bram Vanroy

我是一个简单的SO用户，我看到代码而不是仅有链接的答案，我会点赞！ :p - gsamaras

Answer 3

以下是一个相当不错的jQuery示例和代码：

http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

- Colin

Answer 4

使用CSS也可以实现相同的效果：

HTML代码如下：

 <img class="opacity_img" src="image.png" alt="" />

IE的CSS支持：

 .opacity_img{
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=45)"; 
  filter:alpha(opacity=45);
 }
 .opacity_img:hover{
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter:alpha(opacity=100);
 }

其他浏览器的CSS：

 .opacity_img{
  opacity: 0.45;
 }
 .opacity_img:hover{
  cursor:pointer;
  opacity: 1.0;
 }

- liza

---

这正是我正在寻找的。 - Ahmet Hayrullahoglu

Answer 5

莉萨给出了一个很好的答案 - 只用几行代码就实现了效果。

但是，如果你想让它更加平滑，可以通过添加以下内容使不透明度过渡持续一段时间：

 .opacity_img{
  opacity: 0.45;
  transition: opacity 0.5s;
 }
 .opacity_img:hover{
  cursor:pointer;
  opacity: 1.0;
  transition: opacity 0.5s;
 }

- asdfgh