当您使用 javascript 或 jquery 鼠标悬停时，如何使图像或按钮发光？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6233922/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you make an image or button glow when you mouse over using javascript or jquery?
提问by user701510
I want to add a glowing effect when I mouse over a button or image. How do I do this with javascript, jquery, or CSS? Here is an example of what I want it to look http://www.flashuser.net/flash-menus/tutorial-flash-glow-buttons-menu.html
当我将鼠标悬停在按钮或图像上时，我想添加发光效果。如何使用 javascript、jquery 或 CSS 执行此操作？这是我希望它看起来的示例 http://www.flashuser.net/flash-menus/tutorial-flash-glow-buttons-menu.html
Can someone give me some sample code?
有人可以给我一些示例代码吗？
Thanks in advance
提前致谢
回答by JordanC
If you dont mind targeting modern browsers you can use CSS transitions and box-shadow properties, no JS needed.
如果你不介意以现代浏览器为目标，你可以使用 CSS transitions 和 box-shadow 属性，不需要 JS。
Check out this site here:
http://designshack.co.uk/articles/css/5-cool-css-hover-effects-you-can-copy-and-paste
(Scroll down until you see Fade-in and Reflect)
在这里查看这个网站：
http: //designshack.co.uk/articles/css/5-cool-css-hover-effects-you-can-copy-and-paste
（向下滚动直到你看到淡入和反射)
Demo here: http://designshack.co.uk/tutorialexamples/HoverEffects/Ex5.html
演示在这里：http: //designshack.co.uk/tutorialexamples/HoverEffects/Ex5.html
回答by brymck
Never a bad time to post Radioactive Buttons, which is pure CSS3. Only Webkit browsers though (e.g. Chrome and Safari). Here's a modified version that just glows on hover, which is much less distracting:
发布纯 CSS3 的Radioactive Buttons绝对是个好时机。虽然只有 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. It should make it easier as more browsers adopt it, but until then this is just an add-on to the JavaScript-based solutions.
jsFiddle 演示。随着越来越多的浏览器采用它，它应该会变得更容易，但在此之前，这只是基于 JavaScript 的解决方案的附加组件。
回答by Colin
Here is a pretty good jQuery example and code:
这是一个非常好的 jQuery 示例和代码：
http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/
http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/
回答by liza
Using CSS also you can achieve the same:
使用 CSS 也可以实现相同的效果：
HTML
HTML
<img class="opacity_img" src="image.png" alt="" />
CSSfor IE:
CSS的IE：
.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);
}
CSSfor other browsers:
其他浏览器的CSS：
.opacity_img{
opacity: 0.45;
}
.opacity_img:hover{
cursor:pointer;
opacity: 1.0;
}
回答by asdfgh
liza gave a great answer - the effect achieved only in few lines of code.
丽莎给出了一个很好的答案——只用几行代码就达到了效果。
But if you'd like it more smooth you can make opacity transition last some time by adding:
但是，如果您希望它更平滑，您可以通过添加以下内容使不透明度过渡持续一段时间：
.opacity_img{
opacity: 0.45;
transition: opacity 0.5s;
}
.opacity_img:hover{
cursor:pointer;
opacity: 1.0;
transition: opacity 0.5s;
}
