CSS填充为hover效果
[英]CSS padding as hover effect
问题描述
I have successfully set a hover and the effect works in principle.
成功设置了一个hover，效果基本正常。 Unfortunately, however, the div moves down a bit as a result.然而不幸的是，结果 div 向下移动了一点。 How do I make the div stay in the same place and extend equally to all sides without moving the div down a bit?如何使 div 保持在同一个位置并均匀地延伸到所有边而不向下移动 div 一点？ Here is the code I have used so far.这是我到目前为止使用的代码。
html, body { padding: 0; color: #000; font-size:14px; background-color:#e8e8e8; vertical-align: middle; font-family:arial,sans-serif,verdana } div#bg1 { display: inline-block; width: 100%; margin: 50px 0px; text-align: center; }.div1{ display: inline-block; width: 30%; background-color: #FFF; color: #000; font-size: 14px; font-weight: bold; border-radius: 15px; border: 15px solid transparent; }.div1:hover{ display: inline-block; width: 30%; background-color: #FFF; color: #000; font-size: 14px; font-weight: bold; padding: 5px; border-radius: 15px; cursor: pointer; transition: 0.15s; }
<html> <head> </head> <body> <div id='bg1'> <div class="div1" align="center">This is a test</div> </div> </body> </html>
As you can see, the top line stays the same, which moves you the entire div down.如您所见，顶行保持不变，这会将整个 div 向下移动。 Where do I have a thinking error?我哪里有思维错误？
1 个解决方案
解决方案1
1 已采纳 2022-04-17 10:15:39
add a minus margin to hover state:向 hover state 添加负边距：
html, body { padding: 0; color: #000; font-size:14px; background-color:#e8e8e8; vertical-align: middle; font-family:arial,sans-serif,verdana } div#bg1 { display: inline-block; width: 100%; margin: 50px 0px; text-align: center; }.div1{ display: inline-block; width: 30%; background-color: #FFF; color: #000; font-size: 14px; font-weight: bold; border-radius: 15px; border: 15px solid transparent; }.div1:hover{ display: inline-block; width: 30%; background-color: #FFF; color: #000; font-size: 14px; font-weight: bold; padding: 5px; margin: -5px; border-radius: 15px; cursor: pointer; transition: 0.15s; }
<html> <head> </head> <body> <div id='bg1'> <div class="div1" align="center">This is a test</div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
在具有悬停效果的图像上填充与没有悬停效果css的相同图像不匹配 - padding on images with a hover effect not matching the same images without the hover effect css
CSS悬停问题（填充） - CSS Hover Issue (Padding)
使用CSS创建悬停效果 - create a hover effect with css
CSS悬停按钮效果 - Css hover button effect
Hover 效果在 css 中没有响应 - Hover effect not responding in css
在 css 中应用 hover 效果 - Apply hover effect in css
CSS - 悬停效果不起作用 - CSS - Hover effect not working
CSS - 慢悬停效果 - CSS - Slow Hover effect
hover效果同css - hover effect with css
使用CSS在悬停效果图像 - Effect image on hover with css
相关标签