使用 :hover 和 :hover:first-letter 时，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;
}

如果没有 :first-letter 伪元素，动画在 IE 中的效果就像一个魅力。

Answer 1

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

Answer 2

如果您在版本 9 或更早的版本中进行测试，则它不会显示任何内容

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

Answer 3

我不确定它为什么会这样。每当您向 :first-letter psuedo 类添加属性时，动画将不再起作用。

:first-letter 伪类似乎取消了之前的悬停。

jsFiddle

正如您所看到的，只要 psuedo 类处于活动状态，它将取消任何先前的 :hover（在这种情况下为过渡）。

所以在你的情况下，我什至不执行你的动画

我不知道为什么会这样，这似乎是以前大的一个新错误：

:first-letter psuedo 类在其后跟一个类或伪类（例如 div:first-letter:hover）时不起作用。
现在好像反过来了？

理论是，只要在:first-letter 之前有一个伪类，它就不起作用。 :hover 伪类可能不被视为“生成的内容”。

当 :first-letter 和 :first-line 伪元素应用于 具有使用 :before 和 :after 生成的内容的元素，它们 适用于元素的第一个字母或行，包括 生成的内容。

来源：http://www.w3.org/TR/CSS2/selector.html#before-and-after

这样:hover 就不会显示出来了。

---

我查看了几个文档，找不到动画、关键帧、转换、首字母伪类之间的任何 other 关系。在 IE 中可能不会相互交互的悬停 puedo-class 和首字母 psuedo-class 之间除外。

---

TL;DR

这很可能是一个错误。
您的 :first-letter psuedo-class 不适用于父元素的 :hover psuedo-class。 :hover psuedo-class 将不会显示，因此您的动画不会加载。

解决方法

您可以直接将内容放在 HTML 中，并将第一个字母包装成一个 span：

<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