Я использовал переход, чтобы сделать простой переход "underline" (его фактический border-bottom
), когда он наводится на вас, вы окажетесь в border-bottom
в действии, и вы увидите, как он выскочит. Однако есть проблема с эффектом перехода "mouseout", когда я отключаю мышь от li > a:hover
исчезает без какого-либо эффекта.
Код CSS3:
/*Menu*/
#menu{
float: right;
margin: -60px 0px 0;
}
#menu ul{
list-style-type:none;
}
#menu ul li{
display: inline;
padding-right: 20px;
}
#menu ul li a{
display: inline-block;
text-decoration: none;
color: #a1a1a1;
font-size: 19px;
padding-bottom: 7px;
}
#menu li > a:hover {
transition: all 0.5s ease 0s;
text-decoration: none;
border-bottom: 1px solid #fff;
padding-bottom: 2px;
}
В: Как я могу получить эффект перехода мыши в css3?
Поместите переход в начальное состояние, а не только на :hover
. Кроме того, если вы хотите оживить обратную сторону без рамки, вам нужна граница, просто сделайте ее прозрачной (или шириной 0px):
#menu ul li a{
display: inline-block;
text-decoration: none;
color: #a1a1a1;
font-size: 19px;
padding-bottom: 7px;
border-bottom: 1px solid transparent;
transition: all 0.5s ease-in-out;
}