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

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？

Answer 1

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

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

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

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

h1 line-height or height issue when hovering for color change

html

css

height

hover