CSS动画在使用时在IE中不起作用：悬停和：悬停：第一字母

Question

我正在尝试更改首字母颜色，并用CSS对文本进行动画动画。在Chrome和Safari中，它可以正常工作，但是在Internet Explorer 10和11中，我无法使其工作。这是我的CSS代码：

.amy:before {
    content:"Amy";
}
.amy {
    display: block;
    width:50px;
    height:30px;
    color:#c63b2c;
    font-size:24px;
}
.amy:hover {        
    display: block;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: wobble;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: wobble;
    -o-animation-duration: 2s;
    -o-animation-iteration-count: infinite;
    -o-animation-name: wobble;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: wobble; 
}
.amy:hover:first-letter {
    color:black;
}

如果没有：第一个字母的伪元素，动画在IE中起作用。

Answer 1

我不确定为什么要这样做。每当您将属性添加到 :first-letter psuedo课，动画将不再起作用。

这 :first-letter Psuedo课程似乎取消了以前的悬停。

JSFIDDLE

如您所见，每当psuedo类处于活动状态时，它将取消以前的任何：悬停（在这种情况下的过渡）。

因此，就您而言，我什至没有执行您的动画

我不为什么会发生这种情况，这似乎是以前大的一个新错误：

:first-letter psuedo课程在班级或伪级时不起作用（例如Div：第一字母：悬停）。
看来现在是另一种方式？

理论是当何时有伪级 :first-letter 它行不通。可能是 :hover 伪级不被视为“生成的内容”。

当：第一字母和：一线伪元素应用于具有以下内容的内容的元素： 生成的内容.

资源 ： http://www.w3.org/tr/css2/selector.html#before-and-after

这样 :hover 没有显示。

---

我看了几个文档，找不到任何文档 其他 动画，钥匙帧，变形，第一个字母的psuedo类之间的关系。在IE中可能无法相互作用的悬停PUEDO级和第一字母的伪级阶段之间的探测。

---

tl; dr

这很可能是一个错误。
您的 :first-letter Psuedo-Class不与 :hover 父母元素的Psuedo类。这 :hover psuedo-class不会显示，因此您的动画未加载。

解决

您可以将内容直接放在HTML中，然后将第一个字母包裹在一个跨度：

<div style="width:160px;height:300px;float:right;">
    <a href="kapcsolat.html" class="animated menu5">
        <span>K</span>apcsolat
    </a>
</div>

悬挂锚时，您在哪里添加样式：

.menu5:hover > span
{
   color: black;
}

JSFIDDLE

Answer 2

您正在测试哪个版本的IE？它应该在IE 10和11中起作用，但是以前的版本不支持CSS3动画的使用。看一看 http://caniuse.com/css-animation

Answer 3

如果您在版本9或以上进行测试，则不会显示任何内容

您可以将浏览器放入IE 10或更高 F12 按钮，然后选择 Browsermode IE10或IE11