仅对字母（而非容器）的悬停效果
Posted
技术标签:
【中文标题】仅对字母（而非容器）的悬停效果【英文标题】：Hover effect only on letter (not container) 【发布时间】：2015-07-27 09:37:47 【问题描述】：我有一个很大的文字，想在悬停字母时触发颜色变化。这意味着白色背景不应该触发悬停效果，只有字母的黑色填充应该触发它。
当文本容器像这样悬停时触发默认悬停效果：
* margin: 0;padding: 0;
p
font-size: 75vw;
line-height: 100vh;
text-align: center;
p:hover
color: darkorange;
<p>SO</p>在 svg 中使用 text 元素的行为方式相同：
text:hover
fill:darkorange;
<svg viewbox="0 0 100 100">
<text x="0" y="50" font-size="70">SO</text>
</svg>有没有办法只在字母填充（示例中的黑色部分）悬停而不是在包含框上时触发悬停效果？
【问题讨论】：
希望对您有所帮助***.com/questions/14575966/… 一种解决方案可能是将文本转换为路径，例如使用github.com/nodebox/opentype.js 或npmjs.com/package/vectorize-text 我知道地图标签，但即使这样也不会很方便，因为它的形状完全不合常规，这可能只能通过 javascript。我希望你能得到答案，我之前也想过这个问题，但没有勇气把它放在这里 @dystroy 感谢您的建议，我会检查一下。 请注意，根据用例，您还可以将文本转换为 Inkscape 中的路径。 【参考方案1】：您可以通过 Path>Object to path 或 Path>Stroke to path 使用 Inkscape to convert the text to a path。一旦文本实际上是路径悬停将默认只对路径的渲染部分进行操作。
即你需要编辑文档本身，虽然它是considered for the upcoming SVG 2 specification，但它不是 SVG 目前直接支持的东西。
【讨论】：
谢谢你的答案。在该功能上线之前，我将看看如何动态实现此功能。【参考方案2】：我在用纯 CSS（CSS 改编自 CSS Sans）制作字母方面取得了一些成功：
$('span').hover(function()
$('.A-after,.A-before').css(
'background-color':'red',
'z-index':'99'
);
$('.A').css('border-bottom','solid 14px red');
,function()
$('.A-after,.A-before').css(
'background-color':'black',
'z-index':'99'
);
$('.A').css('border-bottom','solid 14px #000000');
);.A
position:relative;
left:30px;
width:60px;
height:91px;
border-bottom:solid 14px #000000;
.A-before
transform:skew(-19deg, 0);
position:absolute;
content:'';
top:12.5px;
left:35px;
width:16px;
height:125px;
background-color:#000000;
.A-after
transform:skew(19deg, 0);
position:absolute;
content:'';
top:12.5px;
left:78px;
width:16px;
height:125px;
background-color: #000000;
span display: inline-block; <!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<span class="A-before"></span>
<span class="A"></span>
<span class="A-after"></span>
</div>
</body>
</html>【讨论】：
我认为这就是您所说的 混合成功 的意思，但以防万一 - 当我们将鼠标悬停在 A 内的三角形区域上时会触发悬停效果，而且只是在顶部的三角形区域之外。也就是说，仍然是一个很好的尝试:) 是的。这一切基本上都归结为如何绘制可以产生那些误报悬停区域的字母。谢谢！ @AlexW thx 对于答案，我考虑过这种方法，如果我只有几个字母而没有像“S”这样的双曲线字母，我可能会使用它但我需要更多字母，这种方法会需要做很多工作。顺便说一句，你为什么使用 jQuery 来实现悬停效果？ jQuery 纯粹是为了快速原型设计。您可以轻松地使用常规 JavaScript 来重新创建我在上面所做的。【参考方案3】：这是非常规的，但您可以在其周围放置一个a 并定位a:hover。然后还包括pointer-event 和cursor 样式。
.text a, .text a:link, .text a:visited, .text a:active
pointer-events: none;
cursor: default;
text-decoration:none;
.text a:hover
color:orange !important;
【讨论】：
以上是关于仅对字母（而非容器）的悬停效果的主要内容，如果未能解决你的问题，请参考以下文章