html - 框大小边框出现在悬停内容移动

标签 html css

代码:

   <div class="block">

    </div>

div.block
{
   box-sizing: border-box;
}
div.block:hover
{
   border: 1px solid orange;
}

使用box-sizing悬停 block 时,里面的内容在移动,如何防止?

最佳答案

div.block {
   box-sizing: border-box;
   border: 1px solid [your bg color];

}
div.block:hover {
   border: 1px solid orange;
}

试试这个:)

当您将鼠标悬停时,它会添加一个边框。所以它会产生额外的像素。如果您为原始元素(此案例 block )添加边框,则无需添加新像素,因为它们已经存在。

如下所述:边框 1px 实心透明可以正常工作

关于html - 框大小边框出现在悬停内容移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16078894/

相关文章:

html - 我的工具提示可以适用于触摸屏吗?

html - 网格内容显示问题:网格

javascript - 关闭模式对话框后将行标记为选中

javascript - 如何检测iframe中页面的高度?

javascript - styled-components:扩展样式并更改元素类型

html - 居中伪元素

html - Safari包装TD不展开表

html - 两行文本的边框半径四舍五入

html - 在 HTML 元素上具有多个单独的类属性是否有效?

php - 联系表格问题,PHP/css