触发 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>