仅在其行高区域上触发css：hover

Question

我正在构建带有一些箭头的地图，当用户单击它们时，这些箭头会触发一些操作。

我正在使用类似于此^的字符来绘制箭头，我想要的是当用户将鼠标移到其上方时更改其颜色。我需要避免在鼠标悬停在字符下方时触发事件，我减小了line-height属性，并在顶部添加了一些填充，因此将背景区域调整为仅覆盖字符形状，看起来像这个：

背景区域的高度减小了

问题是：hover，它继续在“原始字符区域”上触发，它忽略了line-height属性，如果在彩色区域下移动鼠标，它将触发悬停并更改文字颜色。

我需要：hover属性才能仅在文本行高或彩色背景上触发。

这可能吗？

div{
  color: white;
  font-size: 40px;
  line-height: 5px;
  background-color: red;
  padding-top: 12px;
  width: 20px;
}
div:hover{
  color:black;
}

<div>^</div>

Answer 1

那确实很奇怪。

作为解决方案，我们可以完全删除div本身上的鼠标事件，并使用伪元素模拟div（因此:hover将在伪元素而不是实际div上触发本身。）

div{
  color: white;
  font-size: 40px;
  line-height:5px;
  background-color: red;
  padding-top: 12px;
  width: 20px;
  height:5px;
  pointer-events:none;
  position:relative;
}
div::after{
  width:100%;
  height:100%;
  display:block;
  position:absolute;
  top:0;
  left:0;
  content:"";
  pointer-events:all;
  
}
div:hover{
  color:black;
}

<div>^</div>

Answer 2

答案比您想象的要简单：您需要隐藏溢出。减小line-height确实会减小行框（所需的高度），但不会更改将溢出的字符的高度：

div {
  color: white;
  font-size: 40px;
  line-height: 5px;
  background-color: red;
  padding-top: 12px;
  width: 20px;
  overflow: hidden;
}

div:hover {
  color: black;
}

<div>^</div>