html - hover伪类影响其他元素

Question

如图所示，我为所有输入和标签元素编写了悬停伪类，但是当我将鼠标悬停在一个标签上时，另一个直接向右缩进

Preview

代码显示:

<Style>
    label {
width: 180px;
float: left;
text-align: right;
margin-right: 0.1em;
display:inline-block;
}
label[type:checkbox]+[type:radio]{
    width: auto;
input:hover { font-size:25px }
label:hover { font-size:25px }
</style>

Answer 1

首先，您应该明确您的标记是有效的。正如评论中已经提到的，您忘记了 label[type...] 描述符的花括号 {。

为避免其他元素在悬停时移动，您应该明确，悬停标签的高度不会大于其旁边的输入元素的高度。因此，标签的 line-height 和输入的 height 至少应为 25px。

因为您没有提供 Minimal, Complete, and Verifiable example确切的代码很难猜到，但以下应该有效:

input {
  height: 25px; /* <- */
}
label {
  width: 180px;
  float: left;
  text-align: right;
  margin-right: 0.1em;
  display: inline-block;
  line-height: 25px; /* <- */
}
label[type:checkbox]+[type:radio] {
  width: auto;
}
input:hover {
  font-size: 25px
}
label:hover {
  font-size: 25px
}