在鼠标移出时立即结束CSS过渡

文章/答案/技术大牛

发布

1回答

html、css、css-animations、css-transitions

我想要显示一个使用CSS链接的图像预览。其行为是这样的，当用户将鼠标悬停在链接上时，图像预览将在1秒后出现，但在悬停时，预览将立即删除。现在为了确保预览在1秒后出现，我以transition-property: visibility; transition-delay: 1s的身份使用了transition属性。虽然这确保了预览在1秒后可见，但由于明显的原因，它从可见到隐藏的转换也延迟了1秒。我能否确保只有从隐藏到可见的转换只需要1秒，而不是使用CSS

浏览 35提问于2020-12-29得票数 0

2回答

CSS: Transition在firefox扩展中不起作用

css、firefox、animation、background、transition

我的css中有如下内容： background: transparent;} rgba(229,95,218,1) 40%, transparent);过渡将被忽略当鼠标移到/移出时，线性渐变的颜色会立即出现/消失

浏览 2提问于2014-11-03得票数 0

2回答

为什么我的jQuery转换会出错？

javascript、jquery、html、css

我有一个带有css覆盖的jQuery过渡，如果用户将鼠标移到上面一秒钟或more....however上，效果会很好，如果用户快速地移动鼠标，那么覆盖文本将保持放置而不显示覆盖背景。

浏览 1提问于2014-01-24得票数 0

1回答

为什么我的图像在悬停时摆动？

hover、css-transitions、shake

谁能帮助我理解为什么的视频图像(而不是播放图标)在我鼠标经过时先上升一个像素，然后下降一个像素，然后当我鼠标移出时又再次上升？在Firefox上效果较慢，所以它可能与CSS过渡有关。

浏览 2提问于2012-08-17得票数 2

回答已采纳

1回答

为什么在div上添加鼠标悬停效果即使在鼠标移出后效果仍然存在？

javascript、css、dom-events、javascript-objects

我的意思是如何在鼠标移出时保留实际的前一个类？sel.style.borderBottom= "2px solid "+x; sel.style.transition="all ease-in .1s" 过渡仍然保留，即使在鼠标输出后，我需要在鼠标输出的旧CSS类。

浏览 0提问于2021-02-06得票数 0

2回答

CSS:防止属性在转换结束前对元素产生影响

css、css-transitions、z-index

所以，当我们在一个元素上移动鼠标时，它应该展开，位于其他元素的前面，并显示隐藏的数据。我做了这样的事： z-index: 50;但是有一个问题:当我们在另一个外部空白上移动鼠标时，z-index将返回到与其他值相同的值。如何防止属性应用，直到过渡结束？这是我的。尝试在一个元素上悬停，将鼠标移出元素，其他元素的背景图像将在过渡结束</e

浏览 4提问于2015-06-08得票数 6

回答已采纳

3回答

CSS:鼠标移出时过渡不透明？

css、css-transitions

o-transition: opacity .15s ease-in-out; } 为什么这只会在我悬停时激活不透明度，而不会在我用鼠标离开对象时激活？

浏览 4提问于2012-05-13得票数 117

回答已采纳

1回答

如何使用react-spring的转换来实现暂停和恢复功能？

reactjs、react-spring

我们需要在react中显示过渡，在鼠标悬停时，我们必须停止过渡，当我们移出鼠标时，它应该恢复吗？任何建议都会有所帮助。谢谢

浏览 4提问于2018-11-16得票数 0

2回答

使用Jquery帮助将淡入淡出应用于背景位置更改

jquery、hover、background-position

我对Jquery非常陌生，但我终于弄明白了当我的#contentContainer悬停在一个单独的“触发器”图像上时，如何改变我的#contentContainer的背景图像(一个精灵)。然而，在我的一生中，我无法解决如何将淡入淡出效果应用于过渡。基本上，我希望它在鼠标移到和鼠标移出时平滑地淡入，而不是当前突然的背景图像过渡。jQuery.noConflict();$j("#sw

浏览 0提问于2010-08-03得票数 1

1回答

从CSS动画平滑结束到过渡，由:hover触发

css、animation、hover

我有一个想法是无限循环嵌套CSS动画，其中每个循环的持续时间是一个不同的质数，因此累积效果是一个很好的非重复动画(用webkit浏览器将鼠标悬停在徽标上以获得一个想法：) 问题是，当:hover状态结束时，一切都会立即跳回原始状态。有没有人有任何想法或建议来使这一过渡更顺利？

浏览 2提问于2012-12-13得票数 2

回答已采纳

1回答

当鼠标悬停在toplink div上时显示块窗体

jquery

鼠标将悬停在区块html上： $('#pop-login').toggleClass("hpposition");css： position: absolute; left:500px;} 现

浏览 2提问于2012-07-14得票数 0

2回答

鼠标悬停完成动画离开

css

我使用CSS关键帧旋转一个元素的悬停状态。

浏览 1提问于2022-03-10得票数 2

回答已采纳

1回答

什么时候加载和触发CSS转换？

css

下面是一个CSS代码片段，用于在悬停按钮时将按钮从#33ae74转换到#1ce。我的问题是:在鼠标悬停之前，没有过渡绑定到按钮，为什么当鼠标悬停时过渡会起作用？在另一种情况下，当鼠标悬停时，过渡绑定到按钮上，同时背景颜色也立即更改为#1ce，因此应该不会有颜色过渡。

浏览 0提问于2021-03-29得票数 0

1回答

mouseout上的css转换显示延迟

css-transitions

我正在尝试将过渡添加到项目列表中，在该列表中，鼠标悬停会通过更改最大高度来扩展项目。鼠标输入时展开会立即发生，但鼠标输出转换会延迟。</div> </body> </html> 可能不相关，但JS鼠标移出事件是立即发生的。我是不是遗漏了什么？有解决办法吗？如果这是正常的/预期的-为什么？

浏览 16提问于2019-02-23得票数 2

1回答

动画部分起作用但不是完全起作用

animation、css

现在我有了，这是一个小的DIV，当鼠标悬停在容器DIV上时，它会从容器DIV的顶部滑入到容器DIV的中心；但在鼠标移出时，它会滑回原来的位置。仅仅使用CSS就可以了吗？

浏览 1提问于2012-08-30得票数 7

回答已采纳

1回答

尚未完成时，Css转换不会顺利地返回。

css、hover、css-transitions

我有一个背景图像，当:悬停时，它会更改为另一个图像。我的问题是:当我把鼠标移出一半进入第一个过渡时，第二个过渡效果就不会发生了。您可以尝试此操作，将鼠标移动到图像中一秒钟，然后将其移出图像。我怎样才能让事情顺利进行呢？注意:当我使用颜色而不是图像时</em

浏览 0提问于2012-06-27得票数 0

回答已采纳

1回答

在Flex 4中，如何为样式属性创建转换？

apache-flex、mxml、skinning、flex-spark

如果我为它创建一个样式声明，它具有不同的颜色值，用于向上和向上状态，它可以正常工作--当鼠标结束时，按钮的背景色会发生变化。但是，我想改变这种行为，这样背景颜色就会随着转换而不是立即发生变化，同时仍然能够定义从CSS伪选择器到CSS伪选择器改变的颜色。所以我在皮肤定义中添加了声明，但是它不能很好地工作。它的行为如下：如果鼠标是在滚动过渡结

浏览 1提问于2013-12-10得票数 0

1回答

Safari中绝对定位的div胜过pdf

jquery、html、css、pdf、safari

我目前正在开发一个自定义的jquery菜单，有时需要将鼠标悬停在pdf上(嵌入到iframe中)。它由绝对定位的div组成，这些div在单击/悬停其父对象时显示。非常简单。<iframe id="ifPDF" sr

浏览 2提问于2014-06-06得票数 0

2回答

将MouseOut延迟添加到此jQuery (菜单导航)

jquery、navigation、mouseout

我一直在遵循一个教程，将CSS/jQuery导航菜单添加到我的站点中，并使其正常工作。我唯一希望看到添加的是鼠标移出时的一个小延迟，因为当您鼠标移出时，下拉菜单会立即消失，这使得菜单使用起来有点烦人。下面是我的脚本：$(" .top-menu ul ").css({display: "none"}); //

浏览 1提问于2010-09-03得票数 2

1回答

有没有办法在重复转换之前添加“降温”延迟或要求用户输入？

html、css、hover、css-transitions

使用CSS时，当图像或框悬停在其上时进行编码时会出现意外的结果。如果鼠标位于过渡开始时的单击区域中，而不是结束时，过渡效果将无限期重复，如果没有延迟，则会卡顿。下面是这个问题的一个简单的html / css演示：div { width: 200px; }doctype html> <html

浏览 1提问于2018-09-08得票数 1

点击加载更多