悬停时的元素抖动/仅在Safari中的类切换
悬停时的元素抖动是指在鼠标悬停在某个元素上时，该元素出现抖动或闪烁的现象。这种抖动通常是由于CSS样式或JavaScript事件处理引起的。
在Safari浏览器中，有时会出现仅在该浏览器中的类切换问题。这是因为Safari对于某些CSS属性或JavaScript事件的处理方式与其他浏览器不同，导致在Safari中出现了类切换的异常行为。
解决悬停时的元素抖动问题可以通过以下方法之一：
- CSS过渡效果：使用CSS的transition属性为元素添加过渡效果，使其在状态切换时平滑过渡，避免抖动的出现。可以通过设置transition属性的duration、timing-function和delay等参数来控制过渡效果的表现。
- JavaScript事件处理：通过JavaScript事件处理来控制元素的状态切换，避免出现抖动。可以使用事件监听器（如mouseover和mouseout）来监听鼠标悬停事件，并在事件触发时改变元素的样式或类。
- 使用CSS动画：使用CSS的animation属性创建动画效果，通过控制动画的播放状态来实现元素状态的切换。可以使用@keyframes规则定义动画的关键帧，然后将动画应用到元素上。
- 避免使用不稳定的CSS属性：某些CSS属性在不同浏览器中的实现方式存在差异，可能导致悬停时的元素抖动。在编写样式时，尽量避免使用这些不稳定的CSS属性，或者通过浏览器兼容性的方式来处理。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云CSS CDN：https://cloud.tencent.com/product/css
- 腾讯云云函数（Serverless）：https://cloud.tencent.com/product/scf
- 腾讯云云开发（CloudBase）：https://cloud.tencent.com/product/tcb
- 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云原生容器服务：https://cloud.tencent.com/product/tke
- 腾讯云云安全中心：https://cloud.tencent.com/product/ssc
- 腾讯云云直播：https://cloud.tencent.com/product/lvb
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动推送：https://cloud.tencent.com/product/umeng
- 腾讯云云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务：https://cloud.tencent.com/product/baas
- 腾讯云腾讯会议：https://cloud.tencent.com/product/tc-meeting
- 腾讯云腾讯会议室：https://cloud.tencent.com/product/tc-room
相关·内容
1回答
我有一个带有徽标切换按钮的侧边栏菜单，它可以切换类"toggled“，在大屏幕上也出现在悬停状态。侧边栏左侧: 100%，切换/悬停左侧: 0；在除safari之外的所有浏览器上，它都工作得很好。只有在safari中，当导航出现时，徽标按钮才会摆动/抖动。padding: 0;
&:focus, &
浏览 40提问于2018-08-29得票数 0
回答已采纳
我正在制作我的新作品集，但我在悬停链接以显示设置为固定位置的背景图像时遇到了一些文本颜色更改的问题。在Chrome上看起来一切正常，但当我在Safari (9.1.3版)中测试它时，颜色发生了变化。你可以在这里看到源码：<ul title="drag me, too" class="small-links">
<li id
浏览 13提问于2017-01-30得票数 1
我想问一下，对于/ to wobble (所选元素)，是否有适当的方法来避免'mouseenter‘函数？这段代码来自jquery，工作正常，但当您多次错误地悬停导航时，当鼠标已经切换到元素时，它就会抖动隐藏的元素。提前谢谢你的帮助。
浏览 3提问于2011-09-17得票数 0
1回答
这使得试图检查仅在悬停期间出现的元素(例如导航菜单)非常令人沮丧，因为使用右键单击->检查元素变得不可能。Safari不这样做，Firefox只在将鼠标移动到内容菜单(本质上也是一样糟糕)时才会触发mouseleave。
有什么方法可以让我重新轻松地检查悬停显示的元素吗？
浏览 1提问于2015-10-27得票数 2
回答已采纳
5回答
以下情况发生在Safari版本7.0.1和IE8中。问题:在取消弹出式菜单后，行的悬停状态仍然存在，而且无论鼠标在哪里，它都不会消失，直到您再次悬停在它上面。有人知道Safari版本7.0.1和IE8的补丁吗？我可以用一些手动的方法来“解除”css的悬停状态。
浏览 7提问于2014-01-30得票数 5
回答已采纳
1回答
所以我的想法已经用完了。我正在制作一个网站。我的第一个。只有CSS3 HTML。当我完成当前的版本时，我将切换到引导程序，只想消除bug。这是一个js小提琴
我当前的问题是，我有一个在悬停时放大的图像，当您单击这个悬停时，它会带您进入一个模式，其中包含有关主题的更多细节，但是当我移除来自悬停的抖动错误时，我就失去了单击图像<em
浏览 1提问于2019-07-20得票数 0
回答已采纳
1回答
多个翻转图像
、、
有没有可能把一张图片放到网页上，并根据光标的位置变化？<body onload="MM_preloadImages('Images/Home.png')">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','Images/Home.png
浏览 2提问于2012-11-16得票数 1
1回答
我希望这些按钮在单击时保持活动，但无法使其工作，而默认情况下，"currentButton“在页面加载时处于活动状态。当我单击任何一个按钮时，我都可以看到用于:active的样式，但单击后它不会保持活动状态。两个按钮的HTML： <button class="w3-button currentButton">Current</button
浏览 4提问于2017-06-01得票数 0
回答已采纳
当我们将鼠标悬停在元素上并将其字体设置为粗体时，如何避免抖动？以下是我编写的代码示例：
有没有什么CSS方法可以避免这种抖动？
浏览 1提问于2010-09-28得票数 3
我的.shake()效果为我提供了跨多个浏览器的业务。例如，在Chrome中，如果我快速悬停，就会遇到队列堆积问题。如果我尝试在抖动效果之前实现.stop()，元素将开始向下抖动，然后在动画未完成且元素完全错位的情况下悬停在那里。在IE中，动画会触发不止一次(即使我没有快速地来回切换)。令人恼火的是，如果我将鼠标放在链接上，它将一遍又一遍地触发动画。
我尝试过使用
浏览 0提问于2012-06-05得票数 1
回答已采纳
下面是隐藏.js_del的css：现在，当光标悬停在.js_post上时，.js_del div会如预期的那样切换。但是，当用户单击.js_post目录中的链接，然后单击浏览器的后退按钮时，就会发生奇怪的事情……
在FF中，一切都如人们所期望的那样工作(即，浏览器将单击解释为鼠标左键并切换.js_del。)然而
浏览 2提问于2013-04-24得票数 0
回答已采纳
当我们将鼠标悬停在一个元素上并设置它的边界时，我们如何避免抖动？以下是我编写的代码示例：
有没有什么CSS方法可以避免这种抖动？
浏览 0提问于2010-09-25得票数 11
回答已采纳
我挖掘了一些由某人编写的css代码，发现了以下内容：.hover和:hover有什么区别吗？
也许某些浏览器对hover的表现有所不同？！
浏览 5提问于2012-01-04得票数 5
回答已采纳
我正在寻找一个解决方案来保持div在鼠标悬停时可见，并且它应该保持可见，直到我再次悬停，而不是在鼠标输出事件上。可以悬停的列表的当前标记： <ul class="crops-archive-home">
<li class="vegetables" style="background</ul> 以及需要在鼠标悬停时显示的div <
浏览 6提问于2020-06-19得票数 0
我在我的页面…上使用了以下代码片段我升级到了最新的jQuery版本，现在不再支持此.is(:hover)。
我如何在上面的代码中实现这一点。我已经在谷歌上找到了一些关于这个问题的帖子，但似乎找不到适合我上面代码的解决方
浏览 0提问于2014-12-13得票数 3
1回答
我使用带有react-collapse的react在div上执行折叠过渡。我的用例是，切换折叠的元素位于折叠元素之下。当我切换到折叠时，仅在Chrome 84+中，过渡发生在元素的上方，并且不会将其向下推。例如，在Firefox中，它就是这样的--这就是我想要的行为。file=/src/App.js在chro
浏览 14提问于2020-08-18得票数 3
回答已采纳
第一个类在页面加载上有一个类active，我想在其他元素悬停时删除它，并将active类添加到悬停的元素中，即使鼠标离开该元素也保持最后一个悬停的元素处于活动状态。我有下面的jQuery，它可以工作，除了它还从第一个活动元素中删除活动类，因为它切换它并删除类
浏览 5提问于2015-06-05得票数 0
1回答
我想知道是否有一种方法可以只将类切换到当前悬停的div。我当前的代码：
$(".recipe").toggleClass("hover&qu
浏览 17提问于2017-01-16得票数 0
回答已采纳
我注意到一个标准:悬停在图像上，它以一个非原始的宽度值显示，当鼠标切换生效时，会导致一个轻微的抖动动画。我猜想这是由于一些像素四舍五入发生的，但是为什么图像在悬停时显示不同呢？请参考我在上的测试案例
请注意，前两个图像在悬停时很好(因为它们使用原始图像的宽度/高度)，但其他所有图像似乎都在右侧和底部添加了一个像素。使用哪种悬停效果似乎并
浏览 2提问于2012-07-09得票数 3
回答已采纳
我的Iphone (Safari浏览器)的访问者抱怨我的菜单不起作用。因此，我在仿真器中尝试了一下，发现没有可用的<code>D0</code>或<code>D1</code>。
浏览 27提问于2019-12-02得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
