html - 使用 :hover and :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

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

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

jsFiddle

正如您所见，只要 psuedo 类处于事件状态，它就会取消任何先前的 :hover(在本例中为过渡)。

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

我不明白为什么会这样，这似乎是以前大的一个新错误:

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

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

When the :first-letter and :first-line pseudo-elements are applied to an element having content generated using :before and :after, they apply to the first letter or line of the element including the generated content.

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

这样 :hover 就不会显示。

---

我查看了几份文档，但找不到动画、关键帧、转换、首字母伪类之间的任何 其他关系。在 IE 中可能不会相互交互的悬停 puedo 类和首字母伪类之间的 Excpect。

---

长话短说

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

解决方法

您可以直接将内容放在您的 HTML 中并将第一个字母包装成一个跨度:

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

悬停 anchor 时添加样式的位置:

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

jsFiddle