仅对字母应用悬停效果（而非容器）

Question

仅对字母应用悬停效果（而非容器）

8

我有一段巨大的文本，希望当鼠标悬停在字母上时触发颜色变化。这意味着白色背景不应触发悬停效果，只有字母的黑色填充才能触发它。

默认情况下，当文本容器被悬停时会触发悬停效果，如下所示：

* {margin: 0;padding: 0;}
p {
  font-size: 75vw;
  line-height: 100vh;
  text-align: center;
}
p:hover {
  color: darkorange;
}

<p>SO</p>

在SVG中使用文本元素的方式与HTML中类似：

text:hover{
    fill:darkorange;
}

<svg viewbox="0 0 100 100">
    <text x="0" y="50" font-size="70">SO</text>
</svg>

有没有一种方法只在字母填充部分（示例中的黑色部分）悬停时触发悬停效果，而不是在包含框上悬停？

- web-tiki

希望这可以帮到您：https://dev59.com/0W3Xa4cB1Zd3GeqPislN - Deep Kakkar

3

可以将文本转换为路径来解决问题，例如使用 https://github.com/nodebox/opentype.js 或 https://www.npmjs.com/package/vectorize-text。 - Denys Séguret

我知道地图标签，但由于形状非常不规则，即使使用该标签也无法解决问题，可能只能通过JavaScript实现。希望你能得到答案，我之前考虑过这个问题，但没有勇气在这里提出来。 - divy3993

@dystroy 谢谢你的建议，我会去看看。 - web-tiki

请注意，根据使用情况，您还可以将文本转换为Inkscape中的路径。 - Denys Séguret

@DeepKakkar 我在提问之前看到了那个问题，但它并没有帮助，因为悬停效果仍然会在包含块上触发。 - web-tiki

3个回答

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>

- Alex W

我认为这就是你所说的“成功参半”的意思，但以防万一 - 当鼠标悬停在A字母内的三角形区域以及三角形区域上方的外部区域时，会触发悬停效果。话虽如此，这仍然是一个非常好的尝试 :) - Harry

1

没错。这基本上都取决于字母的绘制方式，可能导致假阳性悬停区域。谢谢！ - Alex W

@AlexW 谢谢你的回答，我曾考虑过这种方法，如果只有几个字母并且没有像 "S" 这样的双曲线字母，我可能会使用它。但是我需要更多的字母，这种方法需要太多的工作量。顺便问一下，你为什么要使用 jQuery 来实现悬停效果？ - web-tiki

jQuery 只是为了快速原型设计而存在。你完全可以使用常规的 JavaScript 来重新创建我上述所做的事情。 - Alex W

-1

这可能有些不寻常，但您可以在其周围放置一个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;
}

- knocked loose

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Robert Longson · Accepted Answer

你可以使用Inkscape通过Path>对象转化为路径或Path>描边转化为路径将文本转化为路径。一旦文本实际上是路径，悬停默认只会在路径的渲染部分进行操作。

也就是说，你需要编辑文档本身，这不是SVG当前直接支持的，尽管正在考虑用于即将推出的SVG 2规范中。