Использование переходной мышки в css3

0

Я использовал переход, чтобы сделать простой переход "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?

http://jsfiddle.net/B6ceP/

Теги:
menu

1 ответ

2
Лучший ответ

Поместите переход в начальное состояние, а не только на :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;
}

JSFiddle

Ещё вопросы

Сообщество Overcoder
Наверх
Меню