当您使用 javascript 或 jquery 将鼠标悬停时，如何使图像或按钮发光？

Posted 2023-03-06

【中文标题】当您使用 javascript 或 jquery 将鼠标悬停时，如何使图像或按钮发光？

【英文标题】：How do you make an image or button glow when you mouse over using javascript or jquery?

【发布时间】：2011-09-08 04:50:10

【问题描述】：

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

谁能给我一些示例代码？

提前致谢

【参考方案1】：

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

在此处查看此网站：http://designshack.co.uk/articles/css/5-cool-css-hover-effects-you-can-copy-and-paste （向下滚动直到看到淡入和反射）

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

【讨论】：

您不仅可以提供参考，还可以提供直接答案。以防死链接。

【参考方案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 的解决方案的一个附加组件。

【讨论】：

这也可以很容易地为其他浏览器转录。

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

【参考方案3】：

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

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

【参考方案4】：

使用 CSS 也可以达到同样的效果：

HTML

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

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;
 

【讨论】：

这正是我想要的

【参考方案5】：

liza 给出了一个很好的答案——只用几行代码就达到了效果。

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

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