正文 

当前位置： 首页 > 知识 >

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

     2023-03-06     288

关键词：

【中文标题】当您使用 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;

【讨论】：

如何使用 javascript 或 Jquery 使用文件系统或操作？

】如何使用javascript或Jquery使用文件系统或操作？【英文标题】：HowtousefilesystemoroperationusingjavascriptorJquery?【发布时间】：2014-02-1505:05:22【问题描述】：我想使用Javascript或jQuery对跨浏览器进行一些文件操作，例如：FilecreateFilewriteF... 查看详情

使用 Jquery 或 Javascript 保存数据

】使用Jquery或Javascript保存数据【英文标题】：SavingdatausingJqueryorJavascript【发布时间】：2018-07-0401:38:21【问题描述】：除了setlocalstorage之外，还有什么方法可以使用Jquery或javascript来保存变量？例如：我有一个在线产品目录网站。... 查看详情

防止用户使用 jquery 或 javascript 重新加载页面 [重复]

】防止用户使用jquery或javascript重新加载页面[重复]【英文标题】：PreventUsertoreloadpageusingjqueryorjavascript[duplicate]【发布时间】：2012-06-2103:12:12【问题描述】：可能重复：PreventanyformofpagerefreshusingjQuery/Javascript如何防止用户使用javascri... 查看详情

根据滚动量或文本ID更改图片

...：2021-03-0507:34:05【问题描述】：（请不要使用jQuery，只有Javascript）您好，我是Javascript新手，我想知道是否可以制作一个固定图像，在滚动过程中将其替换为同一位置的另一个图像。这样，当您滚动时，图片看起来会发生变化。... 查看详情

使用 javascript 或 jQuery 生成 CSS 媒体查询

】使用javascript或jQuery生成CSS媒体查询【英文标题】：GeneratingCSSmediaquerieswithjavascriptorjQuery【发布时间】：2013-04-0916:15:30【问题描述】：是否可以使用Javascript或jQuery即时创建完整的媒体查询规则？我使用内联CSS、导入和链接文件... 查看详情

使用 JavaScript 或 jQuery 拆分文件

】使用JavaScript或jQuery拆分文件【英文标题】：SplitfilewithJavaScriptorjQuery【发布时间】：2012-08-1619:54:36【问题描述】：我需要上传文件的一部分（只有第一个MB）。我创建了一个上传整个文件的PHP脚本。数据(formDataObject)通过ajax调用... 查看详情

如何使用 jquery 或 javascript 删除索引处的行？ [复制]

】如何使用jquery或javascript删除索引处的行？[复制]【英文标题】：Howtousejqueryorjavascripttoremovearowatindex?[duplicate]【发布时间】：2011-08-1420:52:55【问题描述】：可能重复：WhatisthebestwaytoremoveatablerowwithjQuery?如果我有使用tr标记的3行表... 查看详情

使用 JavaScript 或 jQuery 定义全局 CSS 类？

】使用JavaScript或jQuery定义全局CSS类？【英文标题】：DefineglobalCSSclassesusingJavaScriptorjQuery?【发布时间】：2013-03-0719:13:49【问题描述】：有没有办法使用JavaScript或jQuery设置全局类的CSS？也就是在页面的&lt;style/&gt;标签后追加.m... 查看详情

如何使用 JavaScript 或 jquery 选中/取消选中复选框？

】如何使用JavaScript或jquery选中/取消选中复选框？【英文标题】：HowtotoCheck/Uncheckcheck-boxusingJavaScriptorjquery?【发布时间】：2014-02-1101:59:21【问题描述】：我可以使用以下代码添加checked属性$(\'#specificCheckBox\').prop(\'checked\',true);但是... 查看详情

如何使用 jQuery 或 JavaScript 设置底边距

】如何使用jQuery或JavaScript设置底边距【英文标题】：HowtobottommarginwithjQueryorJavaScript【发布时间】：2016-02-1015:05:03【问题描述】：如何为我的选择框添加下边距？我已经试过了#Selectionmargin-bottom:23px;但这对我不起作用。有没有办法... 查看详情

使用 JavaScript 或 jQuery 检测哪个表单输入具有焦点

】使用JavaScript或jQuery检测哪个表单输入具有焦点【英文标题】：DetectwhichforminputhasfocususingJavaScriptorjQuery【发布时间】：2010-09-2603:57:50【问题描述】：如何？在一个函数中，我希望能够确定哪个表单输入具有焦点。我希望能够在... 查看详情

如何使用 PHP 或 JavaScript/jQuery 禁用地址栏？

】如何使用PHP或JavaScript/jQuery禁用地址栏？【英文标题】：HowtodisableaddressbarusingPHPorJavaScript/jQuery?【发布时间】：2014-06-2906:59:38【问题描述】：如何禁用PHP或JavaScript/jQuery中的地址栏/url文本框？这可能吗？【问题讨论】：一般不... 查看详情

使用 jquery 或 Raw javascript 更改元素本身

】使用jquery或Rawjavascript更改元素本身【英文标题】：ChangeanelementitselfwithjqueryorRawjavascript【发布时间】：2013-10-0106:32:20【问题描述】：有什么方法可以用jQuery或基本的Javascript来改变元素本身。例如：我们有一个HTML标签为&lt;ahr... 查看详情

jQuery或javascript查找页面的内存使用情况

】jQuery或javascript查找页面的内存使用情况【英文标题】：jQueryorjavascripttofindmemoryusageofpage【发布时间】：2011-02-0113:56:11【问题描述】：有没有办法找出网页或我的jquery应用程序正在使用多少内存？这是我的情况：我正在使用一个... 查看详情

如何防止使用 jQuery 或 Javascript 进行双重提交？

】如何防止使用jQuery或Javascript进行双重提交？【英文标题】：HowcanIpreventadoublesubmitwithjQueryorJavascript?【发布时间】：2011-02-0719:17:13【问题描述】：由于不耐烦的用户多次单击提交按钮，我的数据库中不断出现重复条目​​。我用... 查看详情

仅使用 jQuery 或 Javascript 刷新 div

】仅使用jQuery或Javascript刷新div【英文标题】：RefreshdivONLYwithjQueryorJavascript【发布时间】：2020-02-0106:45:18【问题描述】：我已经浏览了很多关于这个的帖子，但我找不到任何适合我的东西。我正在尝试仅刷新div部分没有PHP文件。... 查看详情

如何使用 jQuery（或 Javascript）获取可见文本？

】如何使用jQuery（或Javascript）获取可见文本？【英文标题】：HowdoIgetjustthevisibletextwithjQuery(orJavascript)?【发布时间】：2010-12-2304:51:51【问题描述】：我有网站可以转换JapaneseKanjiintoRomaji(romanletters):输出显示和隐藏用户需要根据输... 查看详情

如何使用 JavaScript 或 jQuery 更改数组内对象的值？

】如何使用JavaScript或jQuery更改数组内对象的值？【英文标题】：HowtochangevalueofobjectwhichisinsideanarrayusingJavaScriptorjQuery?【发布时间】：2011-06-0901:24:33【问题描述】：以下代码来自jQueryUIAutocomplete：varprojects=[value:"jquery",label:"jQuery",des... 查看详情