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