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

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

从来没有时间发布放射性按钮,这是纯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的解决方案的附加组件.