0

我有一个类被添加到网站的各个部分以显示一个部分是可编辑的。该类名为.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 填充，因此当边框在悬停时显示时，该部分不会“移动”。

当要编辑的部分已经有填充时，就会出现问题。例如

.sectionToBeEdited {
    padding:10px;
}

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

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

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

还是有其他方法可以做到这一点？

4

3 回答 3

1

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

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

.editable { /* change border color to something invisible */
    border:1px solid white;
}
.editable:hover { /* make border visible */
    border:1px dashed red;
}
于 2013-04-18T07:50:28.537 回答
1

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

  1. 有transparent边框，只需将颜色更改为red悬停
  2. 使用边框的轮廓outline: 1px dashed red;它不会影响框大小
  3. 添加margin: -1px; border: 1px dashed red;悬停，使框在所有方面都被拉伸 1px
于 2013-04-18T08:25:28.777 回答
0

这就是我的选择：

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

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

于 2013-04-18T10:01:57.937 回答