Question

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

代码显示：

<script type="text/javascript">
  var style = 'assets/css/style.css?'+Math.random();;
</script>

<script type="text/javascript">
  document.write('<link href="'+style+'" rel="stylesheet">');
</script>

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
}

悬停伪类会影响其他元素

1 个答案: