Question

当我将鼠标移到按钮或图像上时，我想添加一个发光效果。如何使用javascript，jquery或CSS执行此操作？这是我想要它的一个例子 http://www.flashuser.net/flash-menus/tutorial-flash-glow-buttons-menu.html

有人可以给我一些示例代码吗？

提前致谢

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

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 demo。随着越来越多的浏览器采用它，它应该会变得更容易，但在此之前，这只是基于JavaScript的解决方案的附加组件。

Answer 3

这是一个非常好的jQuery示例和代码：

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

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;
 }

Answer 5

liza给出了一个很好的答案 - 只有几行代码才能实现效果。

但是如果你想要它更流畅，你可以通过添加：

来持续不断变换

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

当你使用javascript或jquery鼠标滑过时，如何使图像或按钮发光？

5 个答案: