css第一封信转型？

问题描述 投票：0回答：3

我试图在鼠标上翻转h1标签的第一个字母，但不起作用！

<html>
<head>
<style>


h1 {
  color: #FF0000;
}

h1:first-letter:hover {
 
  color: #000;
  transform: scaleX(-1);
  transition: all 3s ease-in-out 0s;
  
  }

</style>
</head>

<body>

<h1>RISVOLTO</h1>


</body>
</html>

我当然不明白该怎么做:(

css transformation flip
3个回答
2
投票

正如其他人所说，这是不可能的。

但是，如果您能够编辑HTML，则可以将第一个字母包装在另一个元素中并转换它。

<html>

<head>
  <style>
    h1 {
      color: #FF0000;
    }
    
    h1 span {
      display: inline-block;
      transition: all 3s ease-in-out 0s;
    }
    
    h1:hover span {
      color: #000;   
      transform: scaleX(-1);
    }
  </style>
</head>

<body>

  <h1><span>R</span>ISVOLTO</h1>


</body>

</html>
0
投票

这是不可能的，因为transform不是:first-letter认可的财产。

只有CSS的一个子集适用于伪元素。

More details at MDN

0
投票

并非所有伪类都可以在伪元素之前进行。在这种情况下，它应该是h1:hover:first-letter。转换不起作用，因为：first-letter只能用于：

  • 字体属性
  • 颜色属性
  • 背景属性
  • 保证金属性
  • 填充属性
  • 边境物业
  • 文字修饰
  • vertical-align（仅当float为'none'时）
  • 文本转换
  • 行高
  • 浮动
  • 明确

您可以在W3Schools上阅读更多相关信息

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.