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

jQuery hover()无法使用绝对定位的元素和动画

您好!感谢您的提问。jQuery的hover()方法可以处理鼠标悬停在元素上时的事件。但是,如果您要使用绝对定位的元素和动画,您需要使用jQuery的animate()方法。

以下是一个示例代码:

代码语言:javascript
复制
$(document).ready(function(){
  $("#hover-element").hover(function(){
    $("#hover-element").animate({
      left: "+=50px",
      opacity: 0.25,
      height: "toggle"
    }, 5000, function() {
      // Animation complete.
    });
  });
});

在这个示例中,当鼠标悬停在#hover-element元素上时,该元素将向右移动50像素,透明度将减少到25%,并且高度将切换(如果原来是可见的,则将变为不可见,反之亦然)。动画将在5秒内完成。

如果您需要更多的帮助,请告诉我!

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

相关·内容

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

今天就针对该特效来说说如何开发(本次内容使用jQuery进行讲解,原生JavaScript代码下周一奉上) 功能效果图 ?...样式处理 针对父级元素进行相对定位设置,针对子级元素(横线)设置绝对定位,并且设置leftbottom值 针对每个导航元素进行样式设置,需要注意是,针对“当前”导航,需要给出不同于其他元素样式(...功能逻辑 当鼠标移入具体每个导航时,设置“横线”left值,使用animate方法实现其缓动效果。 当鼠标移入移出整个导航条时,再控制横线显示与隐藏。 ?...hover事件 hover事件是jQuery事件,不存在于原生JavaScript当中,是mouseover(鼠标移入)与mouseout(鼠标移出)功能综合体; hover事件基本语法为:...; position()方法是jQuery方法,$(ele).position().left表示元素与其相对定位元素左边距离。

8.7K50

jQuery动画】停止动画、淡入淡出、自定义动画

实现效果 代码及思路 总结 ---- 停止动画 使用动画过程中,如果在同一个元素上调用一个以上动画方法,那么对这个元素来说,除了当前正在调用动画,其他动画将被放到效果队列中,这样就形成了动画队列...通过此方法,可以让动画队列后面的动画提前执行。 stop()方法 stop()方法适用于所有的jQuery效果,包括元素淡入淡出、自定义动画等。...) 以淡入淡出方式将匹配元素调整到指定透明度 fadeToggle([speed],[easing],[fn]) 在fadeIn()fadeOut()两种效果之间切换 注意:fadeTo()方法参数...思路: 1、引入jQuery库; 2、为所有颜色方块设置2秒完成半透明淡入效果(fadeTo); 3、添加鼠标滑过函数(hover); 4、为每一个方块设置动画效果,即当前元素(this...代码演示 实现效果 自定义动画 代码及思路 思路: 1、定义按钮,定义div元素; 2、设置盒子大小、颜色、绝对定位(position:absolute),绝对定位盒子是相对于离它最近一个已定位盒子进行定位

2.4K20

jQuery

来代替,相当于原生js中window 1.1.3 jQuery 对象 DOM 对象 用原生 JS 获取来对象是 DOM 对象 jQuery 方法获取元素jQuery 对象。...jQuery 对象是经过包装dom对象(伪数组形式存储) jQuery对象才能使用jQuery方法,不能混用 1.1.4 jQuery对象Dom对象转换 // DOM对象转换成jQuery对象...div加定位,否则无效 3.2.5 事件切换 jQuery中有hover()事件,功能类似于css中hover hover(function,function) 传入2个参数,第一个参数是鼠标移入是触发函数...}) position()获取带有定位偏移 获取位置是相对于带有定位父级元素 这个方法只能获取,不能修改 $('div').position() scrollTop() scrollLeft...事件委托 $('ul').on('click','li',function() { alert('hello world'); }) 对于新创建元素,click无法绑定,但是on可以

8.4K10

搞定这些疑难杂症,向css3动画说yes

说起css3动画,有一个属性我们绝对避不开了,那就是transform这个属性,而如果要搞点高级3d特效,那还有两个比较容易混淆东西perspectivepreserve-3d,下面我们简单说明关于这些一些疑难点...所以水平垂直居中弹窗如果用了translate水平定位,然后再使用transform动画,那就毁了。 注: 听说谷歌正在拆分这四个值,这样就简单多了。...查看demo,主要代码如下: // child一开始为none,demo hover时候使用动画显示 .demo .child{ display: none; } .demo:hover ....事件,所以只能绑定一个,不然会触发两次事件,见demo 2、如有多个属性参与动画,就会出现多个transitionend事件(这个事件标准还是有不少bug),所以请使用jqueryone事件,或者绑定事件调用函数中随即取消绑定事件...有节制地使用:通常,当元素恢复到初始状态时,浏览器会丢弃掉之前做优化工作。

2K80

搞定这些疑难杂症,向css3动画说yes

说起css3动画,有一个属性我们绝对避不开了,那就是transform这个属性,而如果要搞点高级3d特效,那还有两个比较容易混淆东西perspectivepreserve-3d,下面我们简单说明关于这些一些疑难点...所以水平垂直居中弹窗如果用了translate水平定位,然后再使用transform动画,那就毁了。 注: 听说谷歌正在拆分这四个值,这样就简单多了。...查看demo,主要代码如下: // child一开始为none,demo hover时候使用动画显示 .demo .child{ display: none; } .demo:hover ....事件,所以只能绑定一个,不然会触发两次事件,见demo 2、如有多个属性参与动画,就会出现多个transitionend事件(这个事件标准还是有不少bug),所以请使用jqueryone事件,或者绑定事件调用函数中随即取消绑定事件...有节制地使用:通常,当元素恢复到初始状态时,浏览器会丢弃掉之前做优化工作。

60660

请收下这 72 个炫酷 CSS 技巧

、3D变换JS实现翻转文字 Rotating Text[26] 视觉 利用backdrop-filter实现毛玻璃背景效果 Frosted Glass[27] 利用背景、绝对定位filter实现毛玻璃景深效果...Card Flip Reflection[36] 页面 利用3D变换实现视差效果 Parallax[37] 利用position:sticky实现粘性滚动效果 Sticky Sections[38] 利用绝对定位交错动画实现镜头拉伸背景效果...Ken Burns Effect[39] 利用伪元素绝对定位动画实现滑动幻灯片 Animated Image Slider[40] 组件 利用border-radius实现曲边导航栏 Nav Tab...[41] 利用动画绝对定位实现汉堡菜单 Burger Menu[42] 利用伪元素动画实现动态划线效果 Menu Hover Underline[43] Menu Hover Magnify[44]...Hover Shining[52] 利用绝对定位动画、渐变overflow:hidden实现蛇形边框按钮 Snake Border Button[53] 利用伪元素、渐变、背景运动实现动态渐变边框

1.2K20

能用CSS实现就不用麻烦JavaScript

曾经某个时期,大多数开发者使用 JavaScript(或者jQuery) 给浏览器中元素添加动画。...随着互动项目越来越复杂,移动设备大量增加,表现性能变得越来越重要。Flash 被抛弃,有天赋动画开发者使用 HTML5 去实现过去从未实现效果。...他们需要更好工具去开发复杂动画序列并获得最好性能。JavaScript(或者jQuery) 并不能够做到。浏览器日渐成熟同时也开始提供了一些解决方案。最被广泛接受方案是使用 CSS 动画。... menu在正常态下是隐藏: .menu{ display: none; } 而当导航hover时显示: ```js /*使用相邻选择器hover...把hover目标隐藏对象当作同一个父容器元素,然后hover写在这个父容器上面就可以了,不用像上面那样,隐藏元素也要写个hover: .marker-container .detail-info

1.3K11

「CSS」linear-gradient()属性值

通过查看源代码发现,这个发光“边框”实现效果是通过一个旋转元素来实现。...,然后为了旋转中心在.imgBx中心,对::before伪元素进行绝对定位: position: absolute; left: 50%; top: 50%; transform: translate(...最后就是动画添加了,::before伪元素进行就是一个简单旋转动画,只要设置关键帧就可以了: @keyframes animate { 0% { transform: translate...注意:因为我们对::before伪元素进行了绝对定位使用了属性transform: translate(-50%, -50%),那么在进行动画时候也要加上translate(-50%, -50%),...::before伪元素对于动画执行设置(4s旋转一周完成一个动画周期,线性,无限循环): animation: animate 4s linear infinite; 然后再对.imgBx容器设置:

72120

Web前端基础(08)

###事件模拟 模拟触发某个元素某个事件 格式: 元素对象.trigger(“事件名称”); $(“input”).trigger(“click”); ###鼠标移入移出事件合并 hover...将鼠标移入移出两个事件合并到一起 //给元素添加鼠标移入移出合并事件 (“div”).hover(function(){ //鼠标移入时执行 (this).css(“color”,“red”); }..."> //给元素添加鼠标移入移出合并事件 $("div").hover(function(){ //鼠标移入时执行 $(this).css("color","red");..."> $("input:eq(0)").click(function(){ //隐藏 时间后面的参数是动画完成后执行 $("img").hide(2000,function()...click(function(){ $("img").slideDown(2000);//下滑 }) $("input:eq(6)").click(function(){ //修改元素显示方式为相对定位

1.2K10

CSS伪类:CSS3鼠标滑过按钮动画

下面我们通过简单示例在学习一下css3动画css伪类。...解析: 1、利用伪类作为鼠标:hover事件后,按钮背景,这里用到了相对定位(relative)绝对定位(absolute) 切记:使用绝对定位元素,父元素一定要用相对定位,否则元素会一直向上找相对定位元素...解析: 1、这里示例一其实类似,不过这里是改变伪类宽度。 2、以此类推,我们可以改变伪类高度,就可以看到向下扩展动画了。...解析: 1、伪类元素:after水平垂直居中 top: 50%; left: 50%; transform: translate(-50%, -50%); 2、动画改变宽度高度(之前示例不一样是,宽高必须大于按钮宽度...1、伪类元素灵活运用 2、transition作用 3、:hover鼠标移入动画 4、元素如何水平垂直居中 小伙伴们,有问题可以评论区留言哦,欢迎大家点评。

2.2K20

jQuery」基础 - 01

jQuery 出现目的是加快前端人员开发速度,我们可以非常方便调用使用它,从而提高开发效率。 jQuery概述 1.1.3 jQuery优点 轻量级。...jQuery 对象 DOM 对象 使用 jQuery 方法原生JS获取元素是不一样,总结如下 : 用原生 JS 获取来对象就是 DOM 对象 jQuery 方法获取元素就是 jQuery 对象...注意:只有 jQuery 对象才能使用 jQuery 方法,DOM 对象则使用原生 JavaScirpt 方法。 jQuery对象DOM对象 1.2.6....因为原生js 比 jQuery 更大,原生一些属性方法 jQuery没有给我们封装,要想使用这些属性方法需要把jQuery对象转换为DOM对象才能使用。...over:鼠标移到元素上要触发函数(相当于mouseenter) out:鼠标移出元素要触发函数(相当于mouseleave) 如果只写一个函数,则鼠标经过离开都会触发它 hover事件停止动画排列案例

6.9K21

所有前端都必须知道 jQuery 技巧

那么你可以在用户悬停时候添加类到元素中,反之则删除类: $('.btn').hover(function () { $(this).addClass('hover'); }, function...更简单方法是使用toggleClass 方法: $('.btn').hover(function () { $(this).toggleClass('hover'); }); 4....淡入 / 滑动切换   滑动淡入都是我们用 jQuery动画时候大量运用东西。如果你只是想在用户点击之后展示一个元素的话,那么用 fadeIn slideDown 方法就很完美。... 设置 min-height,这意味着它可以比主 div 大但绝对不能比主 div 小。...修复时候要小心这个问题。 8. 通过文本查找元素   通过使用 jQuery contains() 选择器,你可以找到元素内容文本。

1.7K20

所有前端都必须知道 jQuery 技巧

那么你可以在用户悬停时候添加类到元素中,反之则删除类: $('.btn').hover(function () { $(this).addClass('hover'); }, function...更简单方法是使用toggleClass 方法: $('.btn').hover(function () { $(this).toggleClass('hover'); }); 4....淡入 / 滑动切换   滑动淡入都是我们用 jQuery动画时候大量运用东西。如果你只是想在用户点击之后展示一个元素的话,那么用 fadeIn slideDown 方法就很完美。... 设置 min-height,这意味着它可以比主 div 大但绝对不能比主 div 小。...修复时候要小心这个问题。 8. 通过文本查找元素   通过使用 jQuery contains() 选择器,你可以找到元素内容文本。

2K70
领券