Изменить поведение CSS Transition Property
-
28-10-2019 - |
Вопрос
ul.nav {
list-style: none;
display: block;
width: 200px;
position: relative;
top: 10px;
left: 300px;
padding: 10px 0 10px 10px;
background: url(shad2.png) no-repeat;
background-position:right;
}
ul.nav li a
{
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
background: #005A9C url(border.png) no-repeat;
background-position: right;
color: #FFFFFF;
padding: 7px 15px 7px 20px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
width: 100px;
display: block;
text-decoration: none;
-webkit-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
}
ul.nav li a:hover
{
background: #ebebeb url(border.png) no-repeat;
color: #005A9C;
padding: 7px 15px 7px 30px;
}
Вышеупомянутый переход CSS создает переход, который движется слева направо на каждом Лиа. Как изменить эффекты перехода, чтобы перемещаться слева налево. Похоже, это свойство CSS3 по умолчанию.
Решение
Изменить padding
:
ul.nav li a {
...
padding: 7px 15px 7px 30px;
}
ul.nav li a:hover {
...
padding: 7px 35px 7px 20px;
position:relative;
left:-20px;
}
Не связан с StackOverflow