Я показываю атрибут title
ссылки на :hover
. Атрибут title добавляется к ссылке через :after
...
Теперь мне интересно, как я могу анимировать непрозрачность псевдоэлемента :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/
Любые идеи, почему это не работает?