前端动画的bug：hover一个li，左滑进背景图，li上文字消失太快（或者说出现闪现消失）

最新推荐文章于 2024-04-19 15:57:51 发布
最新推荐文章于 2024-04-19 15:57:51 发布
阅读量1.5k 收藏
点赞数
分类专栏： 前端 动画 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_2842405070/article/details/71605252
版权
博客讲述了在前端开发中遇到的一个动画问题，即当鼠标悬停在li元素上时，蓝色框滑入，图片从右侧滑入，但文字颜色瞬间变为白色导致闪现效果。作者分析了可能的原因，包括CSS hover事件和jQuery hover()函数的时间差异，以及animate.min.css的动画延迟。通过调整，实现了文字颜色渐变的效果，避免了闪现。此外，还分享了CSS3中translate、transform和translation的差异和联系。
摘要由CSDN通过智能技术生成

要求实现的动效：左边每一条li鼠标经过的时候，蓝色框从左边滑进，右边图片从右边滑进
实现的效果

出现的bug：hover上一个li，文字的变白速度比滑出条速度快，出现一瞬间的闪现效果（或者说完全消失）
文字变白以至于有一瞬间完全消失

蓝色条是从左滑出的，使用的是jq+animate.min.css

$("li").hover(function(){
   

    $(
最低0.47元/天 解锁文章
电鳗效应
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端项目-hover.css.zip
09-02
前端项目-hover.css,CSS3提供动力的悬停效果集合，用于调用动作、按钮、徽标、特色图像等。
前端交互之hover用法
weixin_42547154的博客
11-06 7492
前端交互之hover用法 不给源码的博客都是耍流氓，所以，第一步，先把源码给各位 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>hover 用法之图片交互&a
前端CSS的hover的用法
qq_40770536的博客
11-22 6588
hover除了用于父子元素还可以用于兄弟元素 ####父子元素直接在父元素的id或者class或标签名后紧接着:hover 然后空格子元素的名字就可以了 .father:hover .son{} ####兄弟元素在兄弟元素的id或者class或标签名后紧接着:hover然后紧接着+再兄弟元素的名字就可以了 ####但兄弟元素要注意在html里前面的兄弟元素放在后面兄弟元素的前面，否则不会有变...
【前端学习 - CSS （1）Hover 事件】
weixin_60364883的博客
01-09 1391
1. 如何解决 a 标点击后 hover 事件失效的问题？ 改变 a 标签 CSS 属性的排列顺序： （爱恨原则）link -> visited -> hover -> active a:link：未访问的样式 a:visited：已经访问的样式 a:hover：鼠标移上去时的样式 a:active：鼠标按下的样式 按照这样书写： 可以解决 a:link 样式被 a:visited 样式覆盖问题。 在 CSS 中，如果对于相同元素针对不同条件的定义，适宜将最一般的条件放在最上
前端CSS中“：hover”伪类选择器的使用
最新发布
小蜗牛764号的博客
04-19 2050
在css中的:hover（悬停）伪类选择器，主要功能是我们用鼠标悬停在我们设置好的页面元素上时，用以触发我们设置的某一元素的属性效果。它不会改变原有的代码功能，但可以加强我们使用者的交互性。对一个超链接，如果我们鼠标悬停碰到它（移动鼠标碰到它），然后它出现了某种变化，如变大、变颜色等；或一个按钮，我们也用鼠标悬停碰到它的位置，原本方形变圆；又或者一张卡片，当鼠标悬停到它的位置时，它产生了阴影效果。网页有以上功能，这是不是可变得很有趣而丰富了呢？
链接伪类（:hover）CSS背景图片有闪动BUG的解决方法
12-01
然而，在某些情况下，尤其是在旧版的Internet Explorer（如IE6）中，使用`:hover`伪类改变背景图片时，可能会遇到一个恼人的闪动问题。这是因为IE6在链接状态切换时没有正确地缓存背景图片，导致每次鼠标悬停时都...
uview左滑组件 group-swipe-action-item：修复bug，左滑删除当前行，下一项自动打开左滑删除场景
11-26
在"uview左滑组件bug修复"这个标签下，我们可以推测这个更新是uView的一次小版本迭代，旨在提升组件的稳定性和用户体验。对于使用uView的开发者来说，及时更新到这个修复版本是必要的，以避免遇到类似问题并保持应用...
ie 处理 gif动画 的onload 事件的一个 bug
10-30
IE浏览器在处理GIF动画的onload事件时存在的一个bug，该bug会导致onload事件重复触发，该问题只出现在IE浏览器上，而Firefox浏览器没有这个问题。 该bug的原因是IE浏览器在处理GIF动画时，会重复触发onload事件，这...
IE6中有一个BUG叫border边框断线现象(border边框部分消失)
09-25
这个问题表现为在IE6中滚动页面时，某些元素的边框会出现部分不可见或者消失的情况，使得边框显示不完整。这种问题主要发生在具有浮动元素（float:left或float:right）并且需要清除浮动（clear:both）的容器中，当...
前端基础学习笔记 hover border-radius
勤能补拙
11-15 421
hover 鼠标移入元素时 伪类 style: div{ width:200px; height:200px; background-color:pink; } 鼠标移入效果： div:hover{ background-color:red; border:1px solid blue } p{ display:none;//一开始消失 wi...
前端页面--在上下滑动时,背景图片不动
weixin_52268321的博客
09-01 746
body{ background:url(“路径”); background-size: 100% 120%; background-repeat:no-repeat; background-position:center; background-attachment: fixed }
前端学习笔记30-input实时监控
CSDNXXCQ的博客
11-17 483
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>k</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.bootcss.com/twitter-bo
2017/9/1前端小白的总结：关于hover的一个故事
u014054437的博客
09-01 409
2017/9/1前端小白的总结 用jquery实现：当鼠标移入一个元素，显示一个框（可以是下拉框什么的）， 可以对该元素和框的父元素上绑定事件。比如说： html代码如下：<li class="dropdown" id="personalLi"> <div class=
【前端开发】CSS中的:hover伪类选择器 你真的搞懂怎么去使用它吗？
极客小俊
01-29 5274
你到底会不会使用伪类:hover ?
web前端十种图片的hover效果（粗糙）
OrdnAry的博客
07-18 2627
<!-- 十种图片hover效果： 1.分析网页内容： 可视化窗口，背景纯色蒙版，图片 html结构和标签 div#d3 > div img 2.网页中基本修饰：尺寸宽高 和初始位置 颜色 背景 3.做效果需要配合什么样的样式属性 :hover --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title
jquery hover事件只触发一次动画
水中熊的博客
12-06 9264
最近工作时遇到个关于动画的问题，如下： $("div").hover( function() { $(this).animate({"margin-top":"100px"},1000); }, function() { $(this).animate({"margin-top":"200px"},1000); }); 看代码就是一个简单
css中的hover ，关于li与a标签的问题
weixin_33894640的博客
12-01 447
&lt;head&gt; &lt;style&gt; ul li a:hover{ background-color: red; } &lt;/style&gt;&lt;/head&gt;&lt;ul&gt; &lt;li&gt;&lt;a&gt;文字&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;这样只有 文字 悬停时会变红 但是
web前端之CSS之hover的使用和鼠标移入移出事件的区别、addEventListener、mouseenter、mouseleave、querySelector、split
软件毕设协助及软件开发、智慧电子模块、计算机科技、软件开发、硬件开发、程序员、写代码、工程师、互联网、物联网、技术栈、程序、编程、IT。
08-24 5024
web前端之CSS之hover的使用和鼠标移入移出事件的区别、addEventListener、mouseenter、mouseleave、querySelector、split
前端中hover失效的问题——情况一
一剑守一城的博客
08-05 3288
1，hover前加了空格或使用了中文冒号 css .abc{ margin: 10px 20px 30px 40px; padding: 40px 30px 20px 10px; width: 50px; height: 60px; position: relative; display: inline-block; backgroun...
li怎么让文字在图片下面_div+css（ul li）实现图片上文字下列表布局
05-29
您可以使用以下步骤来实现图片上文字下列表布局： 1. 使用`<div>`标签包裹图片和文本，为其添加一个`class`名，比如`container`。 2. 在`<div>`标签内部先放置图片，使用`<img>`标签，并设置`width`和`height`属性。 3. 在图片下面添加一个`<ul>`标签，用于放置列表。 4. 在`<ul>`标签内部添加`<li>`标签，用于放置每一条列表项。 5. 在`<li>`标签内部添加需要展示的文本，可以使用`<h3>`、`<p>`等标签。 6. 使用CSS样式设置`container`的宽度和高度，以及图片和文本的位置和样式。 以下是一个示例代码： HTML: ``` <div class="container"> <img src="your-image-url.jpg" width="200" height="200"> <ul> <li><h3>List Item 1</h3><p>Description of list item 1</p></li> <li><h3>List Item 2</h3><p>Description of list item 2</p></li> <li><h3>List Item 3</h3><p>Description of list item 3</p></li> </ul> </div> ``` CSS: ``` .container { width: 80%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; } img { margin-bottom: 20px; } ul { list-style: none; padding: 0; margin: 0; } li { margin-bottom: 10px; } h3 { font-size: 18px; font-weight: bold; margin-bottom: 5px; } p { font-size: 14px; } ``` 这样就可以实现图片上文字下列表布局了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值