我有一个奇怪的问题 - 这段代码在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;}
提前感谢您的提示!
答案 0 :(得分:1)
将动画从 .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/
但我不确定为什么消息错误:适用于Chrome。