按钮连接hover上去后改变样式抖动的问题

最新推荐文章于 2021-03-11 14:20:13 发布
原创 最新推荐文章于 2021-03-11 14:20:13 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #ViewUI

本文详细介绍了在网页项目中遇到的一个技术挑战：如何在鼠标hover时改变图片显示，并且避免出现图片尺寸与背景位置不匹配导致的左右抖动现象。通过调整CSS样式属性，尤其是background-position的值，成功实现了hover状态下的平滑过渡效果。
在mark项目找人代购的环节，点击找人代购按钮，鼠标hover上去时改变图片（及honver前后图片不一样），代码如下：

.buyAgency{float: left;width: 75px;height: 28px;display: block;overflow: hidden;background-position: 0 -137px; cursor: pointer; margin-bottom: 10px; margin-left: 593px; margin-top: 1px;}
.buyAgency:hover{background-position: -75px -137px;}

由于我把background-position: -75px 和 width: 75px;设置的值不一样出现了左右抖动，只要相同就好了，同样上下也是一样的。
在 SAP UI5 中为标准按钮扩展 hover 事件：从控制扩展到无障碍与灵活性的一体化实践
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
10-16 37
本文介绍了在SAP UI5中扩展Button控件以支持hover事件的方法。主要内容包括： 通过继承sap.m.Button并声明metadata.events来实现hover事件的最小实现方案 浏览器事件与UI5事件委托的边界处理，建议使用onmouseover/onmouseenter 渲染器复用策略，推荐保留父类ButtonRenderer以减少升级成本 与SAPUI5 Flexibility框架的协作，确保设计时支持 触屏设备的兼容性处理，需考虑无障碍访问需求 样式主题处理建议，推荐复用主题变量而非
html之解决边框重合问题，鼠标移动文字上文字抖动问题
爱上喝水的女孩的博客
03-25 2296
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0p
悬停在按钮上，按钮抖动
weixin_30569153的博客
08-07 113
1 <style> 2 .lanren { 3 margin: 100px auto; 4 width: 200px; 5 text-align: center; 6 height: 40px; 7 line-height: 40px; 8 border: 1px solid #CCC; 9 ...
按钮hover状态的css实现
lvyzu的博客
12-28 3035
按钮hover状态的css实现
解决hover显示边框时发生抖动的问题
hst_gogogo的博客
06-04 1万+
当我们用 :hover 选择器的时候，如果要给鼠标滑过的元素加上边框或者加粗边框的时候，有可能会发生抖动现象（甚至有可能会挤走下面的元素），见下图： 解决方法： 方法一：提前加边框。给元素加上 n像素（想要hover的时候显示多少像素边框就加多少像素） 的和背景色一样的边框（或者干脆将border的透明度为0，eg: border:1px solid rgba(100,100,100,0)...
hover抖动问题
small__children的博客
08-29 6698
在使用hover的时候，当鼠标悬浮的时候，会出现抖动 我的代码是在鼠标悬浮在 li 标签上的时候，改变 li  的背景颜色，当时为了扩大背景颜色的大小，还给li加上了margin，这时抖动的情况就出现了。代码如下  .select_hover:hover{             background-color: #CCCCCC;             margin:5px auto 15...
jQuery实现仿京东防抖动菜单效果示例
10-18
例如，通过jQuery可以选择页面上的元素，并改变其样式属性来显示或隐藏菜单。在本实例中，使用`.show()`和`.hide()`方法来控制`.menu_cont`的可见性，这可以通过监听`.menu_item`的点击事件来实现。 具体到代码层面...
pyqt5用setStyleSheet设置按钮点击后抖动效果
05-29
如果你想使用`setStyleSheet`方法来实现按钮点击后的抖动效果，可以使用CSS3中的`animation`属性来实现动画效果。 以下是一个示例代码： ```python from PyQt5.QtCore import QTimer from PyQt5.QtGui import ...
简洁美观的css3下载按钮动画特效
06-11
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉效果和交互体验，其中之一就是创建各种动态的按钮动画特效。本主题聚焦于一个“简洁美观的css3下载按钮动画特效”，它是利用jQuery库与CSS3的特性相...
CSS3实现纯原生按钮悬停抖动效果教程
- **:hover伪类**：当鼠标悬停在元素上时会触发，常用于实现鼠标悬停效果，如改变背景颜色、字体大小或执行动画效果。 - **自定义CSS类**：在实际开发中，通常会为特定效果创建一个自定义的类，比如这个例子中的抖动...
css 对div用hover设置border，出现抖动和div走位问题，解决方法
热门推荐
qq_38932936的博客
08-02 2万+
样式设置 ： div:hover { border:1px solid red;} 当鼠标移动到div时，产生抖动和偏移。 产生的原因： 是因为设置border时设置了1px边框，多出的这1px，与其它元素产生了挤压， 导致div偏移。 解决方法： 第一种方法：是先将这个div设置一个跟背景颜色一样的边框，比如背景颜色为#aaa；那么你先设置这个d...
解决图片hover后添加边框晃动问题
AndrewNeo
09-07 5600
我们经常遇到这种情况，有一列图片，当我们鼠标移动到某张图片上时，希望为选中的图片添加一个边框，可这样的话就会影响到相邻图片晃动。这是因为hover后的图片宽度变大，撑开了其他图片。遇到这种情况最简单的方法便是事先就为每张图片添加一个透明边框，这样hover事件后就不会出现其他图片晃动的问题了。
hover加边框或边框加粗元素不抖动
lzf的博客
04-24 4015
hover加边框或边框加粗元素会抖动
hover效果加边框不抖动
u012337009的专栏
07-19 7776
前两天遇到一个hover效果给整个div加边框的问题。 html 如下 <div class="hot-recommend"> <div class="wrapper"> <div class="offer-list"> <ul class='underline'> <li class=
字体加粗造成文字抖动
extendworld的博客
09-03 3022
解决思路：为文字预留宽度 &amp;amp;amp;lt;ul&amp;amp;amp;gt; &amp;amp;amp;lt;li title=&amp;amp;quot;title 1&amp;amp;quot;&amp;amp;amp;gt;title 1&amp;amp;amp;lt;/li&amp;amp;amp;gt; &amp;amp;amp;lt;li title=&amp;amp;quot;t
css3动画效果抖动解决
weixin_34006965的博客
08-29 4974
div{ height: 20%; } @keyframes shanghua{ from{ height: 0%; } to{ height: 60%; } } div:hover{ animation: shanghua 1s linea...
CSS设置样式时，鼠标移动到div上，发生抖动问题解决办法
Einstellung的博客
03-11 3869
出现抖动现象背后的原因 比如你可能会遇到这样的场景，就是有一个div块，当鼠标悬浮的时候，需要添加一个border（比如多个div块以卡片的形式排列起来）。你可能会考虑写成这样的CSS： div:hover { border: 1px solid blue } 但是这样写会导致一个问题，就是div块之间比如说间距是3px，这时候加了一个border，间距可能会变成4px。div块之间间距突然拉大（比如说那种多个卡片场景），从视觉上来看就好像页面的div块间发生了抖动。你可能会考虑使用box-sizing:
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值