悬停效果仅适用于字母（而非容器）

Question

我有一个很大的文本，我想在悬停字母时触发颜色变化。这意味着白色背景不应触发悬停效果，只有字母的黑色填充才能触发它。

当文本容器像这样悬停时会触发默认悬停效果：

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

<p>SO</p>

在 svg 中使用文本元素的方式相同：

text:hover{
    fill:darkorange;
}

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

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

Answer 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;
}

Answer 2

您可以使用 Inkscape convert the text to a path 通过 Path>Object to path 或 Path>Stroke to path。一旦文本实际上是一个路径，默认情况下悬停将仅在路径的渲染部分上运行。

即你需要编辑文档本身，这不是 SVG 目前直接支持的东西，尽管它是 considered for the upcoming SVG 2 specification.

Answer 3

我在用纯 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>

悬停效果仅适用于字母（而非容器）

Hover effect only on letter (not container)

javascript

css

svg

hover