html - 触发 css:hover 仅在其行高区域

Question

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

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

背景区域的高度降低了

问题是：悬停，它继续触发“原始字符区域”，它忽略了 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>

标签： htmlcsshover

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>