html - 你能在 CSS 中为 <abbr> 标题设置动画吗？

Question

你能为 <abbr> 起个标题吗？使用 CSS 淡入淡出？
我知道如何设置标题的样式，我想知道是否也可以为其设置动画。
我的意思是，当您将鼠标悬停在该元素上时，它会突然出现。我想让它慢慢淡入淡出，想知道在 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;
}

Answer 1

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

在演示中，pseudo 已经存在，但在您将鼠标悬停在<abbr> 之前是半透明的。