我正在显示title
链接的属性:hover
。标题属性通过:after
...附加到链接中</p>
现在我想知道如何:after
在悬停和悬停时为伪元素的不透明度设置动画。
html
<a class="link" href="#" title="something"></a>
css
.link {
display:block;
width:50px;
height:50px;
background:red;
}
.link:after {
position:relative;
content: attr(title);
top:55px;
color:$blue;
zoom: 1;
filter: alpha(opacity=00);
opacity: 0;
-webkit-transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-ms-transition: opacity .15s ease-in-out;
-o-transition: opacity .15s ease-in-out;
transition: opacity .15s ease-in-out;
}
.link:hover:after {
zoom: 1;
filter: alpha(opacity=100);
opacity: 1;
}
查看演示:http: //jsfiddle.net/d2KrC/
任何想法为什么这不起作用?</p>