Question

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

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

* {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>

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

Answer 1

您可以将Inkscape用于convert the text to a path通过路径＆gt;对象到路径或路径＆gt;描边到路径。一旦文本实际上是一个路径悬停，默认情况下只对路径的渲染部分进行操作。

即。您需要编辑文档本身，这不是SVG目前直接支持的内容，尽管它是considered for the upcoming SVG 2 specification。

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

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

Answer 4

使用伪类@ViewData["Nom"].ToString() @foreach(var prod in Model) { <li>@prod.Name</li> }

::first-letter

这将使段落的每个第一个字母的字体大小为100px

现在悬停效果的伎俩取决于你。

悬停效果仅限于字母（不是容器）

4 个答案: