CSS:为什么当悬停停止时，悬停动画会停止？
CSS中的悬停动画停止是因为CSS中的悬停效果是通过:hover伪类来实现的。当鼠标悬停在一个元素上时，会触发:hover伪类的样式，从而改变元素的外观。但是一旦鼠标移开，元素就不再处于悬停状态，所以悬停动画也会停止。
这种行为是CSS规范中定义的，主要是为了保持用户界面的一致性和可预测性。当用户将鼠标移开时，悬停动画停止可以帮助用户明确地知道他们已经离开了该元素，避免了动画持续播放可能引起的混淆和困惑。
然而，如果希望在悬停停止时继续播放动画，可以使用JavaScript来实现。通过监听鼠标移入和移出事件，可以在悬停停止时继续播放动画。具体实现方式可以使用JavaScript的事件监听器和CSS动画属性来控制元素的动画效果。
关于CSS动画和:hover伪类的更多信息，可以参考腾讯云的CSS动画教程和:hover伪类的官方文档：
- CSS动画教程：https://cloud.tencent.com/developer/doc/1101
- :hover伪类官方文档：https://cloud.tencent.com/developer/doc/1102
相关·内容
1回答
如何在像过渡一样悬停后反转动画？
html、css、css-transitions、css-animations
CSS转换以动画形式返回到前一个状态，并遵循相反的转换规则。但动画不会。它们只是突然返回到原始状态(例如，当:hover或类被移除时)。有没有办法让动画表现得像过渡一样(就像下面的代码一样)？
浏览 1提问于2019-07-08得票数 0
2回答
CSS:为什么当悬停停止时，悬停动画会停止？
html、css、css-animations
以以下CSS为例 .button { height: 100px;}
transform: scaleX(5);} 这是在悬停时触发的，但当鼠标离开按钮时，div将返回到其原始状态。为什么会这样呢？
浏览 22提问于2020-12-04得票数 0
回答已采纳
1回答
当图表停止“滴答”时，d3悬停css停止工作。
css、animation、svg、d3.js、hover
基本上，当图是动画时，我的悬停类可以正常工作。但一旦它解决了，：悬停停止工作。它也不仅仅是伪CSS类。我还尝试了mouseOver/mouseOut事件来添加/删除类。此方法也将停止工作。一旦拖动一个节点并恢复动画，悬停/鼠标切换也是如此。
浏览 0提问于2013-12-19得票数 1
回答已采纳
1回答
引导-如何从崩溃的肚脐上消除悬停效果？
jquery、css、twitter-bootstrap
我有如下所示的悬停动画：.navbar-default .navbar-nav li a:active {}在较小的设备上，当折叠列表扩展时，蓝色框影悬停也会触发.但是我不希望它在折叠的列表锚点中触发，因为引导默认的悬
浏览 5提问于2016-03-20得票数 2
回答已采纳
2回答
如何用CSS3覆盖jQuery动画？
javascript、jquery、css
我有一个动画的几个元素，持续几秒钟。当您悬停在其中一个上面时，我希望CSS3动画暂停并做一些事情，当悬停停止时，继续动画。下面是一个显示CSS3动画发生的快速示例，当您在第三个栏上悬停(使用类.test)时，它应该覆盖CSS：
fro
浏览 0提问于2013-10-06得票数 0
回答已采纳
1回答
悬停摆动效果:如何停止鼠标上的自我调用功能？
jquery、loops、setinterval
我正在尝试复制在信息页面Bureau.cool底部的网站中显示的悬停状态中的摆动文本。以下是我目前所处的位置：我的问题:如何创建一个函数，在悬停
浏览 1提问于2019-02-12得票数 0
回答已采纳
3回答
用于悬停效果的jQuery备忘css
jquery、css、undo、memoization
我想为一个元素创建一个悬停效果，但希望该元素的悬停前CSS与以前一样，当再次悬停时。因此，当再次悬停在元素之外时，我不想无意中覆盖先前的样式。换句话说，这是一种记录元素的css状态并在以后恢复该状态的简单方法。
想法？
浏览 3提问于2012-05-06得票数 0
回答已采纳
1回答
停止CSS动画
html、css、animation
我有下面的代码，当鼠标悬停在容器div上时，它为image类提供动画效果。然而，如果图像在动画中，用户停止悬停，动画就会暂停--这看起来有点奇怪。
有没有一种方法可以停止CSS动画或将其恢复为静态？
浏览 3提问于2012-05-20得票数 0
回答已采纳
2回答
悬停在div上有时不会改变到原来的颜色
javascript、jquery、html、css
当我悬停在其中任何一个，我希望它改变为灰色，然后回到原来的颜色，当我的鼠标离开元素。var originalColor; function() { backgroundColor: originalColor }它按其应有的方式动画化背景变化然而，即使在我鼠标退
浏览 6提问于2014-07-28得票数 0
回答已采纳
2回答
拉斐尔-霍弗动画
javascript、raphael
当你将鼠标悬停在拉斐尔元素上时，我正在尝试有一个小小的动画。当您将鼠标悬停在该元素上，然后立即将鼠标移出该元素时，您可以看到这一点。下面是我用来制作悬停
浏览 0提问于2013-05-15得票数 1
回答已采纳
1回答
悬停时停止CSS动画
css、drop-down-menu、hover、css-animations
对于我的项目，我编写了一个纯CSS悬停菜单。当页面加载时，菜单(#drop)在向上移动之前等待几秒钟，从视图中消失。您可以通过将鼠标悬停在页面顶部的另一个元素(#hover)上来返回菜单。当您加载页面时，当您将鼠标悬停在#hover上时，#drop在完成等待后会向上移动一段时间，然后以一种不稳定的方式向下移动。有没有办法让菜单只在你不使用纯CSS悬停在#drop上的时候才弹出来？或
浏览 10提问于2020-09-15得票数 0
回答已采纳
1回答
如何在jquery中重新启用按钮悬停
javascript、jquery、html、css
我试图在点击时禁用动画，因为当点击时，动画开始移动，如果你仍然悬停在它冻结的对象上，最终结果是动画停止运行，它只是移动，function show_box() { $('.tab-content').hide(0, $(this).pre
浏览 0提问于2014-04-13得票数 1
4回答
我如何调整这段javascript代码，当鼠标悬停在元素上时，动画就会被激活？
javascript、jquery、css、css-animations
因此，当我将鼠标悬停在按钮上时，我使用了Justin Aguilar的CSS3动画小抄中的代码来激活按钮上的动画：<script> $(this).addClass("pulse");</script>
问题是，即使我
浏览 0提问于2017-09-08得票数 0
3回答
如何防止jQuery悬停事件在未完成时触发？
jquery、jquery-selectors、jquery-events
sidebar_details, .sidebar_click').fadeOut(500); 问题是，当slideDown和fadeIn动画发生时，可能会触发多个悬停事件。理想情况下，应该只触发一个悬停事件，如果用户不再将鼠标悬停在div.sidebar_content_con上，它应该立即停止动画。
浏览 0提问于2011-06-29得票数 2
回答已采纳
1回答
-webkit-动画-播放-状态在Chrome中不起作用
css、google-chrome、css-animations
我设置了一个简单的JSFiddle来说明这个问题：
谁能告诉我为什么Safari会像预期的那样将动画元素显示为暂停状态，而在Chrome中动画却在运行？下面是暂停元素的CSS。
浏览 2提问于2014-03-13得票数 0
7回答
悬停时连续的CSS旋转动画，悬停时动画回到0度
css、css-animations
我有一个元素，当你无限期地悬停在它上面时，它会旋转。向外悬停时，动画将停止。-webkit-animation-iteration-count: infinite;}任何输入都是很棒的
浏览 1提问于2011-11-03得票数 64
回答已采纳
2回答
jQuery UI显示盲队列问题
jquery、jquery-ui、button、jquery-hover
我在尝试应用动画时遇到了问题。
我试图创造的效果是，一个白色边框和透明背景的按钮在从左到右悬停时会被白色背景颜色填充，当用户鼠标熄灭时从左到右再次清除。同时字体颜色也变为可读颜色。为什么是两个a元素？因此，用户可以单击顶部/显示的任何一个。当我禁用停止时，所有动画自然会堆叠在一起，因此连续悬停/取消悬停将使动画反复重复。当我启用stop时，当你
浏览 0提问于2013-02-16得票数 0
4回答
图像上的内容框悬停？
javascript、html、css
我有一堆图片在一个新网站上的画廊im建设和我想有内容显示时，用户悬停在一个图像。例如，如果用户将鼠标悬停在我的图库中的一张汽车图片上，那么低不透明度的内容div将在整个图像上淡入淡出，以显示文本和可能的链接。下面是我脑海中的一个例子：谢谢你的帮助，如果有人能为我指明正确的方向，我将不胜感激。
如果需要，我可以发布更多信息。
浏览 0提问于2011-07-25得票数 2
回答已采纳
3回答
如何停止多个不透明动画队列？(jQuery)
javascript、jquery、html
<div id="div1">Hover me to show Div2</div>-i将CSS中div2的不透明度设置为0。我想要发生的-what是当我将div2悬停时，它的不透明度将从0降到1$("#div2").mouseenter(function(){
$("#div2).fadeTo("
浏览 4提问于2014-06-17得票数 0
回答已采纳
3回答
如何使用jQuery悬停作为触发器，让div以恒定的速度左右移动？
javascript、jquery、animation、hover
我试图使用jQuery的悬停和动画事件来使div在我悬停在触发器div上时以恒定的速度左右移动。mouseleave', function(){ });我在这里的思考过程是，将鼠标悬停在不确定这是否会向右或向左移动)。怎样才是实现我想做的事情的正确方法
浏览 2提问于2016-02-04得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
