首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Jquery背景图像在链接鼠标经过时更改,并在鼠标移出时返回

JQuery是一种流行的JavaScript库,用于简化HTML文档遍历、事件处理、动画效果等操作。在前端开发中,可以使用JQuery来实现背景图像在链接鼠标经过时更改,并在鼠标移出时返回的效果。

具体实现这个效果的步骤如下:

  1. 首先,确保在HTML文档中引入了JQuery库,可以通过以下方式引入:<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  2. 在HTML中,为需要实现背景图像更改效果的链接元素添加一个特定的类名,例如"change-bg":<a href="#" class="change-bg">Link</a>
  3. 在JavaScript中,使用JQuery选择器选中具有特定类名的链接元素,并为其绑定鼠标经过和鼠标移出事件:$(document).ready(function() { $(".change-bg").hover( function() { // 鼠标经过时的操作 $(this).css("background-image", "url('new-image.jpg')"); }, function() { // 鼠标移出时的操作 $(this).css("background-image", "url('original-image.jpg')"); } ); });

在上述代码中,当鼠标经过链接时,使用css()方法将背景图像更改为"new-image.jpg";当鼠标移出链接时,将背景图像恢复为"original-image.jpg"。

这样,当用户将鼠标悬停在链接上时,背景图像将更改为新的图像;当鼠标移出链接时,背景图像将返回到原始图像。

推荐的腾讯云相关产品:腾讯云对象存储(COS)

  • 概念:腾讯云对象存储(COS)是一种安全、高可靠、低成本、高扩展性的云端存储服务,可用于存储和处理任意类型的文件数据。
  • 优势:具备高可用性、高可靠性、低成本、强大的数据处理能力等优势。
  • 应用场景:适用于网站、移动应用、大数据分析、备份与归档等各种场景。
  • 产品介绍链接地址:腾讯云对象存储(COS)

请注意,以上答案仅供参考,具体实现方式可能因实际需求和环境而有所不同。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【CSS】鼠标移动到元素上方显示 移出盒子范围隐藏案例 ( 子绝父相 | 显示隐藏元素对象 | 鼠标经过样式设置 | 半透明遮罩设置 )

一、鼠标移动到元素上方显示 / 移出盒子范围隐藏案例要点分析 ---- 1、子绝父相 这里要 在一个 div 盒子上方套一层遮罩 , 遮罩就需要 使用绝对定位将其覆盖到其它元素中 ; 子元素使用了 绝对定位...链接 , 显示 链接 中的 one 元素 , 需要使用如下选择器 进行设置 ; /* 鼠标过时 one 作为遮罩 显示出来 */ .box a:hover .one { /* 设置显示元素...DOCTYPE html> 鼠标移动到元素上方显示 / 移出盒子范围隐藏案例</title...: blue; } /* 半透明遮罩 开始是隐藏的 鼠标移动到 a 链接后显示该元素 */ .one { /* 先设置隐藏元素 */ display: none; /...center center; } /* 鼠标过时 one 作为遮罩 显示出来 */ .box a:hover .one { /* 设置显示元素 none 为隐藏 block 为显示

2.9K30

加点JavaScript魔法

客户端将服务器端返回的响应中的html内容显示在弹出窗口中。当用户移开鼠标,弹出窗口将被删除。听起来很简单,对吧?...正如我上面提到的,这会影响悬停事件的行为,只要用户将鼠标链接移动到弹出窗口本身,就会触发“鼠标移出”事件。...如果在元素集合上调用这个函数,jQuery方便地将事件附加到所有元素上。这两个参数是两个函数,分别在用户将鼠标指针移入和移出目标元素时调用对应的函数。...如果用户将鼠标指针移动到其中一个用户链接中,并在移动它之前停留了半秒钟,我不希望该timer继续运行并调用显示弹出窗口的函数。...现在剩下的就是完善鼠标移出事件处理程序上的删除弹出窗口逻辑。 如果用户将鼠标移出目标元素,该处理程序已经具有中止弹出操作的逻辑。

3.9K10
  • HTML之marquee(文字滚动)详解

    marquee>Hello, World 下面这两个事件经常用到: onMouseOut="this.start()" :用来设置鼠标移出该区域继续滚动...()">onMouseOut="this.start()" :用来设置鼠标移出该区域继续滚动 onMouseOver="this.stop()":用来设置鼠标移入该区域停止滚动... 移动属性的设置 ,这种移动不仅仅局限于文字,也可以应用于图片,表格等等 鼠标属性 onMouseOut=this.start() ........鼠标移出状态滚动 onMouseOver...=this.stop() .........鼠标过时停止滚动 方向 #=left, right ,up ,down 从右向左移...这是一个滚动速度为120MM,从下到上碰壁即返回并对齐中间,鼠标划过图标即停止,点击图标进入〈千娇论坛〉的一个来回滚动的代码。

    8.3K163

    jQuery特效 | 导航底部横线跟随鼠标缓动

    HTML5学堂(码匠):jQuery来实现如下特效 - 在导航底部存在一条横线,跟随着鼠标缓动到相应导航项底部。...功能需求明确 横向导航条; 当鼠标移入导航区域的时候,在当前导航底部淡入一个横线; 当鼠标在导航区域当中左右移动,横线跟随鼠标移动; 当鼠标移出导航区域的时候,横线淡出。...功能逻辑 当鼠标移入具体每个导航,设置“横线”的left值,使用animate方法实现其缓动的效果。 当鼠标移入移出整个导航条,再控制横线的显示与隐藏。 ?...hover事件 hover事件是jQuery中的事件,不存在于原生JavaScript当中,是mouseover(鼠标移入)与mouseout(鼠标移出)的功能综合体; hover事件的基本语法为:...$(ele).hover(function(){ // 鼠标移入时要执行的内容 }, function(){ // 鼠标移出要执行的内容 }) animate 与 stop animate用于指定某个或某些属性发生动态效果的变化

    8.7K50

    jQuery笔记(2)

    顺便把之前的微博的案例修改了一下: 本文由“壹伴编辑器”提供技术支持 但是jQuery还是想要把代码极简,所以还封装了事件切换方法 hover([over],out) over: 鼠标移到元素上就要触发的函数...(相当于mouseenter) out: 鼠标移出元素要触发的函数(相当于mouseleave) 微博下拉菜单示范: 完整的写法: 比之前的还要方便!...但是jQuery还能更加简便!假如里面只有一个函数,意思就是不管鼠标移入还是移出都会触发这个事件,此时就有个更简单的方法了: 懒就是人类进步的动力.......其余参数都可以省略 多加几个属性 王者荣耀手风琴特效案例: 手风琴特效指的是当鼠标移动到元素上,它的宽度会变大,当鼠标移开又变回原来的宽度 现在我们来试着做一下吧 现在做好了布局...可以返回指定祖先元素 做案例的收获: 保留小数的方法: toFixed( )

    84710

    【前端基础篇】JavaScript之jQuery介绍

    $(selector).mouseover(function) 操作元素 获取/设置元素内容 三个简单的获取元素内容的JQuery⽅法: JQuery方法 说明 text() 设置或返回所选元素的文本内容...html() 设置或返回所选元素的内容(包括 HTML 标签) val() 设置或返回表单字段的值 **这三个⽅法即可以获取元素的内容,⼜可以设置元素的内容. ** 有参数,就进⾏元素的值设置...背景颜色会恢复为白色 hover(): 当鼠标悬停在元素上触发两个不同的函数,分别用于鼠标移入和移出。...#elementId 元素,背景颜色变为浅蓝色;移出,变为浅灰色 keydown(): 当用户按下键盘按键触发,适合处理键盘事件。...}, error: function(error) { console.log("请求失败", error); } }); // 使用GET方法从指定URL加载数据,并在成功将其显示在

    6610

    前端(四)-jQuery

    对象,就可以对这个对象进行操作; 可以查找当前元素下的子元素; html //当鼠标访问指定的li,指定的li下的p标签显示,鼠标移除后,对应的p消失 3</span...事件与特效 4.1 基础事件 4.1.1 鼠标事件 事件名称 说明 mouseover() 鼠标移入事件 mouseout() 鼠标移出事件 mouseenter() 鼠标移入事件 mouseleaver...() 鼠标移出事件 hover() 鼠标移入和移出事件 click() 鼠标点击事件 dblclick() 鼠标双击事件 focus() 获取焦点事件 blur() 失去焦点事件 鼠标事件方法的区别...,不触发 mouseout() 鼠标离开被选元素是会触发 鼠标在其被选元素的子元素上来回离开,触发 mouseleaver() 鼠标离开被选元素是会触发 鼠标在其被选元素的子元素上来回进入时,不触发...{ //当表单提交事件,接收到false的返回值不会在提交表单内容,可以实现去除表单的默认提交处理(让from的action失败),包括超链接 return false;

    8.5K30

    jQuery Cheat—Sheet(jQuery学习笔记)

    ; }); 鼠标移入并点击事件 当鼠标指针移动到元素上方,并按下鼠标按键,会发生 mousedown 事件。 在下面实例中,鼠标移入元素,并点击,弹出“Bye!...; }); 鼠标释放事件 当在元素上松开鼠标按钮,会发生 mouseup 事件。 在下面实例中,鼠标点击元素,释放,弹出“Mouse up over p1!”...当鼠标移动到元素上,会触发指定的第一个函数(mouseenter,); 当鼠标移出这个元素,会触发指定的第二个函数(mouseleave)。...下面实例中,鼠标移入元素,触发mouseenter,弹出“Mouse up over p1!”警告框; 鼠标移出元素,触发mouseleave,弹出“Bye!...提示: > 当进行链接,代码行会变得很差。不过,jQuery语法很宽松;可以按照希望的格式来写,包含换行和缩进。

    16.2K30

    JQuery基础

    使用大公司CDN好处: 许多用户在访问其它站点,已经从百度、新浪、谷歌和微软加载过jQuery。当用户访问我的站点,会从缓存中加载jQuery,这样可以有效减少加载时间!...常见DOM事件: 鼠标事件:click(单击元素),dbclick(双击元素),mouseenter(鼠标指针移入元素),mouseleave(鼠标指针移出元素)事件; 键盘事件:keypress(键被按下...当鼠标指针移动到元素上,会触发第一个函数(mouseenter);当鼠标指针移出这个元素,会触发第二个函数(mouseleave)。...function(){ 6 //鼠标指针移出该元素 7 } 8 ); 第五部分:jQuery效果 1.隐藏和显示: $(selector...(不带参数) 6.jQuery链(chaining) 链:顾名思义,锁链,即一环套一环。 jQuery中将动作/方法链接在一起,因此,在相同元素上,我们可以在一条语句上运行多个jQuery方法。

    4.6K51

    jQuery:详解jQuery中的事件(二)

    鼠标移动到元素上,会触发指定的第一个函数(enter);当鼠标移出这个元素,会触发指定的第二个函数(leave)。   ...只有在鼠标指针穿过被选元素,才会触发 mouseenter 事件。   mouseout与mouseleave   不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。   ...只有在鼠标指针离开被选元素,才会触发 mouseleave 事件。   ...上篇有过下面的一个例子,在其中如果要连续单击“标题”链接,实现“内容”隐藏和显示的效果,那么按照之前的做法就需要在绑定“click”事件的时候判断当前的“内容”部分是隐藏还是显示,然后进行相反的操作,显然就麻烦的多...所以,移除事件就涉及两种情况下的移出,一种是移除之前注册的所有事件,而是移除其中的一个事件。以一个按钮为例:假设网页中有一个id为btn的按钮,其上绑定了几个click事件。

    2.2K30

    第79天:jQuery事件总结(二)

    鼠标移动到元素上,会触发指定的第一个函数(enter);当鼠标移出这个元素,会触发指定的第二个函数(leave)。   ...只有在鼠标指针穿过被选元素,才会触发 mouseenter 事件。   mouseout与mouseleave   不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。   ...只有在鼠标指针离开被选元素,才会触发 mouseleave 事件。   ...上篇有过下面的一个例子,在其中如果要连续单击“标题”链接,实现“内容”隐藏和显示的效果,那么按照之前的做法就需要在绑定“click”事件的时候判断当前的“内容”部分是隐藏还是显示,然后进行相反的操作,显然就麻烦的多...所以,移除事件就涉及两种情况下的移出,一种是移除之前注册的所有事件,二是移除其中的一个事件。以一个按钮为例:假设网页中有一个id为btn的按钮,其上绑定了几个click事件。

    1.6K20

    4-Jquery学习四-事件操作

    jQuery 1.3 新增该函数,从jQuery 1.7开始被标记为已过时,在jQuery 1.9中被移除,请使用on()函数来替代。请使用on()函数来替代。 5,die 同上。...4-triggerHandler()的返回值是对应事件处理函数的返回值,而不是当前jQuery对象本身。...对于text和textarea元素,该事件会在元素失去焦点发生(文本内容也发生了更改)。...它与mouseleave事件相似,但mouseleave事件只会在鼠标离开当前元素触发,而mouseout事件会在鼠标离开当前元素及其任何后代元素触发(换句话说,mouseout事件支持冒泡)。...35,mousedown 36,mouseup mousedown事件会在鼠标按钮被按下触发。mouseup事件会在按下鼠标按钮并释放触发。

    4.5K90

    JavaScript--DOM总结

    鼠标 / 键盘属性 属性 描述 altKey 返回当事件被触发,"ALT" 是否被按下。 button 返回当事件被触发,哪个鼠标按钮被点击。...clientX 返回当事件被触发鼠标指针的水平坐标。 clientY 返回当事件被触发鼠标指针的垂直坐标。 ctrlKey 返回当事件被触发,"CTRL" 键是否被按下。...metaKey 返回当事件被触发,"meta" 键是否被按下。 relatedTarget 返回与事件的目标节点相关的节点。 screenX 返回当某个事件被触发鼠标指针的水平坐标。...screenY 返回当某个事件被触发鼠标指针的垂直坐标。 shiftKey 返回当事件被触发,"SHIFT" 键是否被按下。...fromElement 对于 mouseover 和 mouseout 事件,fromElement 引用移出鼠标的元素。

    7410

    JQuery最全常用方法指南

    ).unbind() 移除所有段落上的所有绑定的事件 $(”p”).unbind( “click”) 移除所有段落上的click事件 hover(over, out) over, out都是方法, 当鼠标移动到一个匹配的元素上面...当鼠标移出这个元素,会触发指定的第二个函数。...几乎所有元素 dblclick() 鼠标双击某个对象 几乎所有元素 error() 当加载文档或图像发生某个错误 window, img focus() 元素获得焦点 a, input, textarea...中几个自定义的事件: (1)hover(fn1, fn2):一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。...当鼠标移动到一个匹配的元素上面,会触发指定的第一个函数。当鼠标移出这个元素,会触发指定的第二个函数。 //当鼠标放在表格的某行上将class置为over,离开置为out。

    11K31

    jQuery

    prevAll() 查找当前元素之前所有的同辈元素 hasclass(class) $( 'div ’ ).hasClass(“protected”) 检查当前的元素是否含有某个特定的类,如果有,则返回...三种预定速度(show,normal,fast)或者是动画时长的毫秒数 第二个参数 easing:指定切换效果,默认是’swing’ 还可设为’linear’ 第三个参数 fn :回调函数,在动画完成执行的函数...中有hover()事件,功能类似于css中的hover hover(function,function) 传入2个参数,第一个参数是鼠标移入是触发的函数,第二个是鼠标移出触发的函数 只写一个参数...,鼠标移入移出都会触发它 4.1 jQuery属性操作 4.1.1 元素固有属性值 prop() 获取元素本身自带的属性,有利于对表单操作 表单属性:disabled checked这类属性操作很顺畅...//获取 prop('属性名'); //更改 prop('属性名','属性值'); 4.1.2 元素自定义属性值 attr() //获取 attr('属性名'); //更改 attr('属性名',

    8.4K10

    06-老马jQuery教程-jQuery高级

    意味着,每次执行传递进来的函数,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。...而且,在每次执行函数,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整型)。...返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。...之前的五角星和自己都变成实心的五角星 $('.list li').hover(function(e) { // 鼠标移入:当鼠标移入 五角星时候。...}, function(e) { // 鼠标移出: 把自己变成空心五角星,而且后面的也都变成空心五角星 $(this).text('☆').nextAll().text('☆')

    1.8K00

    前端特效开发 | JS实现聚光灯看图效果

    ;同时为了让鼠标移入时有更好的展示状态,在hover特地为图片增加一个白色的边框,以区分当前展示的图片区域。...2.2 功能逻辑分析 首先动态的获取了当前每张图片的大小,并设定一个透明度变量; 然后借助JQ的hover()方法,实现鼠标移入移出的图片展示; 最后当用户的鼠标移开了无序列表,还原当前图片的不透明状态...具体如下所示: // 当鼠标悬停在列表项上... $('.spotlight ul li').hover(function(){ //...找到它里面的图像,并添加活动类,并更改不透明度为1(...,这时只需要为最外层的无序列表绑定鼠标移开事件—mouseleave,然后在里面设置所有的图片都不透明度即可,如下操作: // 当鼠标离开无序列表... $('.spotlight ul').on('...找到刚刚离开的列表项中的图像,并删除活动类 $(this).find('img').removeClass('active'); }); // 当鼠标离开无序列表

    4.4K50
    领券