looogle
Active Member
- Регистрация
- 12.07.2010
- Сообщения
- 36
Делал вот такую страничку: https://thimble.webmaker.org/p/pi1
Вот код:
Если направить на "Телефон", то бэкграунд плавненько двигается и меняется "Телефон" на сам номер. Однако, когда убираешь (отводишь) мыш от элемента происходит обратная анимация, при которой слово "Телефон" появляется раньше, чем исчезает номер. Не очень красиво, однако.
Можно как-нибудь решить эту проблему? Спасибо.
Вот код:
Код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<link href="http://fonts.googleapis.com/css?family=Marmelad&subset=latin,cyrillic" rel="stylesheet" type="text/css">
<title>MrLisDim</title>
<style>
body{
background:url('http://subtlepatterns.com/patterns/low_contrast_linen.png');
}
.contact{
position:absolute;
width:200px;
height:auto;
overflow:hidden;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-50px;
padding:10px;
background-color:rgb(255, 255,255);
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
border-radius:10px;
font-family: 'Marmelad', sans-serif;
text-shadow:0px 0px 3px rgb(120, 120,120);
}
ul{
margin-top:5px;
}
li{
list-style-type:none;
line-height:40px;
display:block;
margin-left:-30px;
padding-left:32px;
cursor:pointer;
}
#phone{
background: url(http://i.imgur.com/kZreA.png) no-repeat 0 7px;
-moz-transition:all 0.5s ease;
}
#phone>#d2{
position:absolute;
opacity:0;
-moz-transition:opacity 0.2s linear 0.1s;
}
#phone>#d1{
position:relative;
opacity:1;
-moz-transition:opacity 0.2s linear 0.1s;
}
#phone:hover>#d2{
position:relative;
opacity:1;
}
#phone:hover>#d1{
position:absolute;
opacity:0;
}
#phone:hover{
background-position: 140px 7px;
margin-left:-50px;
}
#adress{
background: url(http://i.imgur.com/DcAFF.png) no-repeat 0 7px;
-moz-transition:background 0.2s ease;
}
#e-mail{
background: url(http://i.imgur.com/zb0e7.png) no-repeat 0 7px;
}
</style>
</head>
<body>
<div class="contact">
Мои контакты:
<ul>
<li id="phone"><span id="d1">телефон</span> <span id="d2">+79625847156</span></li>
<li id="adress">адрес</li>
<li id="e-mail">e-mail</li>
</ul>
</div>
</body>
</html>Можно как-нибудь решить эту проблему? Спасибо.
