当你使用javascript或jquery鼠标hover时,如何使图像或按钮发光?

当我将鼠标hover在按钮或图像上时,我想添加一个发光效果。 如何使用javascript,jquery或CSS执行此操作? 这是我希望它看起来的一个例子http://www.flashuser.net/flash-menus/tutorial-flash-glow-buttons-menu.html

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

提前致谢

如果你不介意定位现代浏览器,你可以使用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

永远不会发布放射性按钮 ,这是纯CSS3。 但只有Webkit浏览器(例如Chrome和Safari)。 这是一个只在hover时发光的修改版本,这更不会分散注意力:

@-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; } Click Me 

jsFiddle演示 。 随着越来越多的浏览器采用它,它应该会变得更容易,但在此之前,这只是基于JavaScript的解决方案的附加组件。

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

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

使用CSS也可以实现相同的目标:

HTML

   

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

丽莎给出了一个很好的答案 – 只有几行代码才能达到效果。

但是,如果您希望它更平滑,您可以通过添加以下内容来进行不透明度转换:

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