2

我正在尝试更改首字母颜色并使用 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 中就像魅力一样工作。

4

3 回答 3

0

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

于 2013-11-08T09:32:13.853 回答
0

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

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

于 2013-11-08T09:48:27.457 回答
0

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

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

jsFiddle

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

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

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

:first-letter伪类在其后跟一个类或伪类（例如 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就不会显示。

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

TL;博士

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

解决方法

您可以直接将内容放在 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

于 2013-11-08T12:21:50.170 回答