你能在CSS中为<abbr>标题设置动画吗?</abbr>

时间:2014-05-18 20:32:51

标签: html css html5 css3 title

你可以使用CSS淡化<abbr>元素的标题吗? 我知道如何设计标题,我想知道是否有可能为它设置动画。
我的意思是,当你将鼠标悬停在元素上时,会突然出现。我希望它慢慢淡入,并想知道它是否可能在CSS中。 JSFiddle

<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;
}

1 个答案:

答案 0 :(得分:5)

例如,您需要使用转换为数字的值: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 */
    }

在演示中,伪已经存在但是是半透明的,直到你悬停<abbr>