Question

我有一个类添加到网站的各个部分，以显示一个部分是可编辑的。该类名为.editable

当用户登录时，当他们将鼠标悬停在这样的部分上时，该部分周围会显示红色虚线边框。

我目前这样做：

.editable { /* add padding to act as clear border */
    padding:1px; 
}
.editable:hover { /* remove padding and add border */
    padding:0px; 
    border:1px dashed red 
}

如评论中所示，我添加了1px填充，因此当悬停时显示边框时，该部分不会“移动”。

当要编辑的部分已经有填充时，会出现问题。 e.g。

.sectionToBeEdited {
    padding:10px;
}

当我添加.editable类<div class="sectionToBeEdited editable">blah</div>时，填充将被覆盖。

问题有没有办法继承填充设置然后再添加1px？然后在悬停时减少任何填充1px。

我知道另一种方法是将可编辑的部分包装在单独的div中并在那里应用填充，但这涉及重写和添加许多类和div。

或者还有另一种方法吗？

Answer 1

CSS只能覆盖其值，不支持数学运算。

您可以使用editable类的白色/透明边框而不是填充来解决您的问题。

.editable { /* change border color to something invisible */
    border:1px solid white;
}
.editable:hover { /* make border visible */
    border:1px dashed red;
}

Answer 2

取决于浏览器支持，有一些选择：

有transparent边框，只需在悬停时将颜色更改为red
使用边框outline: 1px dashed red;的轮廓，它不会影响框大小
在悬停时添加margin: -1px; border: 1px dashed red;，这样盒子将在所有方面拉伸1px

Answer 3

这就是我的目的：

.editable { 
    border: 1px dashed rgba(255, 0, 0, 0);
}
.editable:hover { 
    border: 1px dashed rgba(255, 0, 0, 1);
}

在悬停时将边框的不透明度设置为0和1

CSSinherit填充，然后减少数量

3 个答案: