Question

我想将h1悬停在下面显示的代码时进行换色。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    h1 {color:#aef;font-size: 14em;line-height: 0.1;}
    h1:hover {color: #ff9224;}
  </style>
</head>
<body>
  <h1>More</h1>
</body>
</html>

（代码也在JS Bin。）

但是，我希望仅在鼠标悬停在字母上时更改颜色，例如，在图片中，绿线下面的字母区域。我曾尝试line-height和height非常小的值，但两者都没有生效。

我应该改变别的吗？或者只是使用p替换h1以方便使用？

hovering green line on the very top of letter

Answer 1

尝试我创建的这个片段，如果它有帮助

＆＃13;

.border {
  overflow: hidden;
}
h1 {
  color: #aef;
  font-size: 14em;
  line-height: 163px;
  margin: 0;
}
h1:hover {
  color: #ff9224;
}

＆＃13;

<div class="border">
  <h1>More</h1>
</div>

＆＃13;

悬停颜色变化时h1行高或高度问题

1 个答案: