Question

我正在尝试更改第一个字母颜色并使用css为文本添加动画效果。在Chrome和Safari中，它可以正常运行，但在Internet Explorer 10＆amp; 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

您正在测试哪个版本的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 psuedo类似乎取消了之前的悬停。

<强> 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。

<小时/> 我查看了几个文档，但在动画，关键帧，转换，第一个字母的psuedo-class之间找不到任何其他关系。在悬停的puedo-class和第一个字母的psuedo-class之间进行切换，它们可能不会在IE中互相交互。

TL; DR

这很可能是一个错误。
您的:first-letter伪类不能使用父元素的:hover伪类。 <{1}} psuedo-class将不会显示，因此您的动画未加载。

解决方法

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

:hover

悬停锚点时添加样式的位置：

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

<强> jsFiddle

使用时，css动画在IE中不起作用：hover和：hover：first-letter

3 个答案:

TL; DR

解决方法