你可以在CSS中动画<abbr>标题吗？

你可以让一个<abbr>元素的标题淡入CSS吗？
我知道如何设计标题的样式，我想知道是否可以对它进行动画制作。
我的意思是，当你将鼠标悬停在元素上时，它突然出现。我希望它慢慢淡入，想知道是否可以在CSS中使用。 JSFiddle 你可以在CSS中动画<abbr>标题吗？

<abbr title="I want this to fade in">Hover over Me!</abbr>

abbr { 
    position: relative; 
    border:none; 
} 
abbr:hover::after { 
    position: absolute; 
    height:auto; 
    width:475px; 
    bottom: -50px; 
    color:black !important; 
    left: 0; 
    display: block; 
    padding: 1em; 
    background: gold; 
    border-radius:2px; 
    content: attr(title); 
    -o-transition:.5s; 
    -ms-transition:.5s; 
    -moz-transition:.5s; 
    -webkit-transition:.5s; 
}

来源

2014-05-18 Jacob Gray

你需要在那里转变为数字时使用的值：opacity的实例。 DEMO

abbr:hover::after { 
    opacity:1; 
} 
abbr::after { 
    position: absolute; 
    opacity:0; 
    height:auto; 
    width:475px; 
    bottom: -50px; 
    color:black !important; 
    left: 0; 
    display: block; 
    padding: 1em; 
    background: gold; 
    border-radius:2px; 
    content: attr(title); 
    -o-transition:.5s; 
    -ms-transition:.5s; 
    -moz-transition:.5s; 
    -webkit-transition:.5s; 
    transition:1s;/* DO NOT FORGET THE REGULAR ONE */ 
    }

在演示中，伪已经存在，但translucide直到你悬停<abbr>

来源

2014-05-18 20:37:08

谢谢！我不小心忘了常规的一个，对不起！ ;） –

只是补充一点，从我记得一些浏览器有问题过渡伪元素（::后），不知道如果情况已经改变 –

@crisbeto ::之后，IE8不理解，但：后:) –

你可以在CSS中动画<abbr>标题吗？

回答

相关问题