Javascript css html仅停留在字母/字符区域

如何使光标仅在«字符上移动时悬停效果才起作用？当前，只要光标进入红色背景，就会应用悬停效果。我只需要在光标位于该区域时应用它：

#工具xxx{
背景色：#FF0000；
背景尺寸：10px 10px；
z指数：100；
位置：固定；
右：1；
顶部：50px；
颜色：rgba（255255,1）；
字体大小：50px；
}
#工具XXX：悬停{
z指数：100；
位置：固定；
右：1；
顶部：50px；
颜色：rgba（0,0,0,1）；
字体大小：50px；
}

«

将

«

符号包装在另一个块中，使该块足够小，并将

：hover

伪类应用于它，而不是应用于

#toolxxx

div:

#工具xxx{
背景色：红色；
背景尺寸：10px 10px；
z指数：100；
位置：固定；
右：1；
顶部：50px；
颜色：rgba（255255,1）；
字号：3em；
填充：0.21em 0em；
}
#工具xxx>span{
显示：内联块；
线高：0.75em；
最大高度：0.75em；
溢出：隐藏；
光标：指针；
}
#toolxxx>span:悬停{
颜色：黑色；
}

«

您需要的是包装

&171代码，然后将
悬停
操作应用于此包装器。
例如：

<div id='toolxxx'> 
    <span>&#171;</span>
</div>

一个可能的解决方案（虽然我个人不喜欢，因为它取决于文本大小），将文本包装在一个
span
中，然后在另一个
span
上包装，该
span
与字符高度相同。大概是这样的：


#工具xxx{
背景色：#FF0000；
背景尺寸：10px 10px；
z指数：100；
位置：固定；
右：1；
顶部：50px；
颜色：rgba（255255,1）；
字体大小：50px；
}
#toolxxx#可悬停{
显示：内联块；
高度：26px；
线高：16px；
溢出：隐藏；
}
#toolxxx#可悬停：悬停{
颜色：rgba（0,0,0,1）；
}

«
这些属性是什么？没有他们，这并不能真正回答问题above@AlvaroMontoro你说得对，我会设法找到具体的解决办法。它看起来比第一次看起来更难。这很好。它不像我的解决方案那样依赖于字体系列/大小的变化，并且它很好地解释了为什么会发生这种情况。这个解决方案可以水平工作，但不能垂直工作
#toolxxx span:hover {
    color: rgba(0,0,0,1);
}