我有一个奇怪的问题-该代码不会在Firefox的工具提示中消失。
这是我的代码:
http://jsfiddle.net/2VsTp/11/
的CSS
@-webkit-keyframes showTooltip {
from {opacity: 0;}
to {opacity: 1;}
}
@-moz-keyframes showTooltip {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes showTooltip {
from {opacity: 0;}
to {opacity: 1;}
}
.form-item {position: relative;}
.message-error:after {
content: attr(data-tooltip);
position: absolute;
top: 0;
left: 10%;
display: none;
padding: 1em 2em;
color: white;
-webkit-animation: showTooltip 0.35s ease-in-out;
-moz-animation: showTooltip 0.35s ease-in-out;
animation: showTooltip 0.35s ease-in-out;
}
.message-error:hover:after {
display: block;
}
.message-error:after {background-color: red;}
预先感谢您的提示!
最佳答案
将动画从.message-error:after移到.message-error:hover:after
.message-error:hover:after {
display: block;
-webkit-animation: showTooltip 0.35s ease-in-out;
-moz-animation: showTooltip 0.35s ease-in-out;
animation: showTooltip 0.35s ease-in-out;
}
http://jsfiddle.net/rooseve/2VsTp/14/
但是我不确定为什么出现message-error:after适用于Chrome。
关于css - CSS动画在Firefox和JSFiddle中不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20624307/