Анимация text-decoration
Нужно, чтобы при наведении на ссылку, плавно появлялся text-decoration. Пробовал анимировать с помощью функции animate();, но этот стиль она не меняет. Может надо скачать определённый фрэймворк, чтобы функция заработала ?
|
Иззет,
а как вы представляите плавное появление того что либо есть либо нет |
рони,
Не вполне вас понимаю, я имею в виду функцию hover jquery: при наведении на ссылку - появление подчеркивающей линии (text-decoration), при уводе мыши - её исчезновение. Я бы хотел, чтобы это происходило с анимацией, по-моему функция animate(); самая подходящая в этом случае. |
Цитата:
|
очень просто :
<style>
a {
text-transform: uppercase;
color: inherit;
text-decoration: inherit;
position: relative;
}
a:after {
width: 100%;
height: 3px;
margin-bottom: -9px;
position: absolute;
bottom: 0;
left: 0;
content: ' ';
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transition: opacity 400ms;
-moz-transition: opacity 400ms;
-o-transition: opacity 400ms;
-ms-transition: opacity 400ms;
transition: opacity 400ms;
}
a:hover:after {
background-color: #7e848c;
opacity: 1;
-ms-filter: none;
filter: none;
}
</style>
<a href="#">Йа ссылко</a>
|
melky,
вот был вариант )))
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
a{
font-size: 24px;
text-decoration: none;
margin: auto 50%;
width: 250px;
}
a:hover ~ hr{
height: 2px;
background: #0000FF;
height: 1px;
width: 250px;
}
hr{
-webkit-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;
height: 0px;
width: 0px;
background: #0000FF;
margin: auto 50%;
margin-top: -5px;
}
</style>
</head>
<body>
<a href="http://javascript.ru/forum/">http://javascript.ru/forum/</a>
<hr >
</body>
</html>
|
рони,
melky, Спасибо за помощь |
| Часовой пояс GMT +3, время: 20:07. |