首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >具有框架防止的CSS动画:悬停

具有框架防止的CSS动画:悬停
EN

Stack Overflow用户
提问于 2015-02-12 11:46:34
回答 1查看 342关注 0票数 0

我正在做一个带有背景转换的CSS animation,我想要一个不同的背景,用于:悬停。但是它不起作用:当我将光标悬停在div上时,动画仍然在播放,但是没有考虑悬停状态。

当我移除动画时,它工作得很完美。

你有什么想法吗?

谢谢

代码语言:javascript
运行
AI代码解释
复制
.loaderGif{
            width: 465px;
            height: 465px; 
            background: url('../images/loader01.png');
            background-size: cover;
            -webkit-animation: animLoader 4s infinite;
            animation:         animLoader 4s infinite;}

@-webkit-keyframes animLoader {
              0%   { background: url('../images/loader01.png'); }
              50% { background: url('../images/loader02.png'); }
              100% { background: url('../images/loader01.png'); }
            }

.loaderGif:hover{
                background: url('../images/loaderBlack.gif');
            }
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-02-12 12:20:08

动画中的CSS声明在动画期间覆盖其他声明:

"CSS动画会影响计算出的属性值。在动画执行期间,属性的计算值由动画控制。这将覆盖在普通样式系统中指定的值。动画覆盖所有正常规则,但被!重要规则覆盖。“- http://www.w3.org/TR/css3-animations/

一旦动画完成,.loaderGif:hover将是活动的,不过万一它永远不会激活,因为动画是无限的。

若要解决问题,请将代码更改为

代码语言:javascript
运行
AI代码解释
复制
.loaderGif:hover{              
    -webkit-animation: none;
    animation:         none;
    background: url('../images/loaderBlack.gif');
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/28486454

复制
相关文章
CSS3贝塞尔曲线实战:创建链接悬停动画效果
我们将使用 CSS3 动画过渡来创建简单但引人入胜的链接悬停效果,将鼠标悬停在链接上时,会弹出一个小弹出框。
张张
2020/11/23
2.4K0
CSS3贝塞尔曲线实战:创建链接悬停动画效果
使用CSS3 box-shadow实现的7个按钮悬停动画特效
itclanCoder
2023/09/14
3800
使用CSS3 box-shadow实现的7个按钮悬停动画特效
【前端艺术】CSS3图片鼠标悬停动画特效代码
该代码实现CSS3图片鼠标悬停动画特效。鼠标/手指悬停到图片上面的时候,利用CSS3制作上下关门的动画效果,非常炫酷。
用户5997198
2019/08/15
4.6K0
CSS 3.0实现的悬停菜单特效
今天给大家分享一个用CSS 3.0实现的悬停菜单特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <
越陌度阡
2020/11/26
1.3K0
CSS 3.0实现的悬停菜单特效
CSS 3.0实现文字悬停特效
给大家分享一个用CSS 3.0实现的网页特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head>
越陌度阡
2020/11/26
1.9K0
CSS 3.0实现文字悬停特效
css实现鼠标悬停图片放大
解析: transform:scale()可以实现按比例放大或者缩小功能。 transition允许CSS的属性值在一定的时间区间内平滑过渡。 可以调节放大倍数以及放大过程所用时间。 效果:
马修
2021/01/21
5.9K0
css实现鼠标悬停图片放大
纯CSS3实现2个的鼠标悬停文本下划线动画效果
itclanCoder
2023/09/14
2460
纯CSS3实现2个的鼠标悬停文本下划线动画效果
CSS 3.0实现视频字幕悬停特效
给大家分享一个用CSS 3.0实现的视频字幕悬停特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head>
越陌度阡
2020/11/26
4910
CSS 3.0实现视频字幕悬停特效
CSS实现图片悬停文字叠加效果
在这篇文章中,我们将看到如何轻松创建一个漂亮的图像悬停文本覆盖效果。对于本教程,你必须具备充分的 HTML 和 CSS 基本知识。
@零一
2021/05/19
3.6K0
CSS 3.0实现卡片悬停立体特效
今天给大家分享一个用CSS 3.0实现的卡片悬停立体特效,效果如下: 以下是代码实现,欢迎大家制复粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head>
越陌度阡
2020/11/26
1.6K0
CSS 3.0实现卡片悬停立体特效
OneCode实战——自定义悬停动画菜单
基于模型驱动的低代码平台,将数据模型与展现模型做了有机的整合大幅降低了开发者的工作量。使程序员可以从繁重的业务编程和UI展现等技术细节上脱离出来。但在具体的项目当中,客户对于展现界面都会有自身独特的展示展现风格。特别是类似于门户主页、功能菜单框架等方面基本上都是定制应用方案。针对于类似的需求在低代码领域中也是一个应用难点,但也不乏优秀的低代码引擎在“全栈”支持上提供了很不错的解决方案。今天我们就选取了一个典型的例子,如何利用OneCode低代码引擎构建自定义应用。
onecode
2023/10/24
4920
OneCode实战——自定义悬停动画菜单
CSS实现图片悬停文字叠加效果
在这篇文章中,我们将看到如何轻松创建一个漂亮的图像悬停文本覆盖效果。对于本教程,你必须具备充分的 HTML 和 CSS 基本知识。
@零一
2021/12/31
4K0
CSS实现图片悬停文字叠加效果
CSS——动画
动画属性是一些与动画相关的CSS属性,可分为两大类:Transition和Animation。
Html5知典
2019/11/26
1K0
5分钟实现鼠标悬停效果,CSS3悬停效果
今天的学习就到这里了,由于本人能力和知识有限,如果有写的不对的地方,还请各位大佬批评指正。如果想继续学习提高,欢迎关注我,每天学习进步一点点,就是领先的开始,加油。如果觉得本文对你有帮助的话,欢迎转发,评论,点赞!!!
AlbertYang
2020/12/29
2.2K0
5分钟实现鼠标悬停效果,CSS3悬停效果
css动画
css动画 优势 简单:不需要js,节省内存 流畅:由浏览器执行 减少代码量 animation动画 过渡动画transition 变换动画transform 关键帧动画keyframes transtion image.png image.png image.png image.png image.png transform image.png image.png image.png image.png image.png image.png
4O4
2022/04/25
2.1K0
css动画
让View具有弹性效果的动画——SpringAnimation
SpringAnimation和FlingAnimation一样,是DynamicAnimation的两种类型。Spring模拟的是物理世界的弹力,弹弹弹,弹走鱼尾纹,,, 先看下效果:
用户1108631
2019/08/17
2.2K0
【React+Typescript+Antd】防止样式感染——LESS CSS 框架简介
样式感染是指不同页面中拥有同一样式名的css样式,并且不同文件对该样式进行不同操作,导致两个页面的样式互相影响的现象。
毛大姑娘
2020/09/10
1.2K0
js动画和css3动画_js控制css动画
Web动画的本质是元素状态改变造成的样式变更,CSS动画和JS动画的区别并不是由语言来决定的,而是由两者的特点和适用场景来判断的。
全栈程序员站长
2022/11/19
13K0
CSS 3.0文字悬停跳动特效
给大家分享一个用CSS 3.0实现的文字悬停跳动特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head>
越陌度阡
2020/11/26
1.3K0
CSS 3.0文字悬停跳动特效
CSS 鼠标悬停图片,显示隐藏文本
我在 JavaScript 鼠标悬停图片,显示隐藏文本 这篇博文当中实现了同样的效果,只不过是通过 JS 来实现的,但其实,通过 CSS 动画也能实现同样的效果,直接看代码吧
Nian糕
2018/08/21
8.8K1
CSS 鼠标悬停图片,显示隐藏文本

相似问题

CSS -防止:在动画期间悬停?

15

CSS动画:悬停和悬停

10

CSS动画和动画:悬停

216

防止CSS“弹出”:悬停

10

CSS反向悬停动画

221
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档