CSSinherit填充，然后减少数量
CSSinherit填充，然后减少数量
提问于 2013-04-18 07:44:52
我有一个类，它被添加到一个站点的各个部分，以显示一个节是可编辑的。这个类名为.editable
当用户登录时，当他们悬停在这样一个区段上时，会在该部分周围显示红色虚线边框。
我现在是这样做的：
.editable { /* add padding to act as clear border */
padding:1px;
}
.editable:hover { /* remove padding and add border */
padding:0px;
border:1px dashed red
}如注释中所示，我添加了一个1 1px填充，因此当边框在悬停时显示时，该部分不会“移动”。
当要编辑的部分已经有了填充时，就会出现问题。例如：
.sectionToBeEdited {
padding:10px;
}当我添加.editable类<div class="sectionToBeEdited editable">blah</div>时，填充将被覆盖。
问题是否有一种继承填充设置并将1px添加到其中的方法？然后在悬停时，将任何填充物减少1/x。
我知道另一种方法是将可编辑的部分封装在单独的div中并在其中应用填充，但这涉及到重写和添加大量的类和div。
或者还有其他方法可以做到这一点？
回答 3
Stack Overflow用户
发布于 2013-04-18 07:50:28
CSS只能覆盖其值，不支持数学运算。
您可能可以通过为editable类使用白色/透明边框而不是填充来解决问题。
.editable { /* change border color to something invisible */
border:1px solid white;
}
.editable:hover { /* make border visible */
border:1px dashed red;
}Stack Overflow用户
发布于 2013-04-18 08:25:28
取决于浏览器的支持，有一些可用的选择：
- 有
transparent边框，只需在悬停时将颜色更改为red - 使用边框
outline: 1px dashed red;的大纲它不会影响框的大小 - 在悬停时加入
margin: -1px; border: 1px dashed red;，这样盒子就会被四面拉长1便士。
Stack Overflow用户
发布于 2013-04-18 10:01:57
我就是这么做的：
.editable {
border: 1px dashed rgba(255, 0, 0, 0);
}
.editable:hover {
border: 1px dashed rgba(255, 0, 0, 1);
}在悬停时将边框的不透明度设置为0和1
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16077232
复制相关文章
相似问题
腾讯云开发者
