Переход верхнего края не работает должным образом

Я использую свойство transition в CSS, и он не работает должным образом с границами. Он переходит, но не выходит. Вот мой код, любая помощь?Переход верхнего края не работает должным образом

#menu { 
 
    width: 100%; 
 
    height: 70px; 
 
} 
 
#menuitem { 
 
    width: 150px; 
 
    height: 70px; 
 
    float: right; 
 
    text-align: center; 
 
    line-height: 70px; 
 
    cursor: pointer; 
 
    transition: all ease-in-out 0.2s; 
 
} 
 
#menuitem:hover { 
 
    border-top: 12px solid #000; 
 
} 
 
.menutext { 
 
    font-family: 'Cabin', sans-serif; 
 
    font-size: 18px; 
 
    color: #000; 
 
    text-decoration: none; 
 
}

<body> 
 
    <div id="menu"> 
 
    <div class="menutext" id="menuitem">CONTACT</div> 
 
    <div class="menutext" id="menuitem">ABOUT</div> 
 
    <div class="menutext" id="menuitem">PRICES</div> 
 
    </div> 
 
</body>

Fiddle: http://jsfiddle.net/MhkTT/

источник

2013-10-03 user2765804

показать нам скрипку ... –

Обратный переход не произойдет, потому что указана только на hover границы. Вы должны добавить его в #menuitem, также как показано в фрагменте, чтобы перевести его обратно в исходное состояние.

#menu { 
 
    width: 100%; 
 
    height: 70px; 
 
} 
 
#menuitem { 
 
    width: 150px; 
 
    height: 70px; 
 
    float: right; 
 
    text-align: center; 
 
    line-height: 70px; 
 
    cursor: pointer; 
 
    border-top: 0px solid transparent; /* added this */ 
 
    transition: all ease-in-out 0.2s; 
 
} 
 
#menuitem:hover { 
 
    border-top: 12px solid #000; 
 
} 
 
.menutext { 
 
    font-family: 'Cabin', sans-serif; 
 
    font-size: 18px; 
 
    color: #000; 
 
    text-decoration: none; 
 
}

<div id="menu"> 
 
    <div class="menutext" id="menuitem">CONTACT</div> 
 
    <div class="menutext" id="menuitem">ABOUT</div> 
 
    <div class="menutext" id="menuitem">PRICES</div> 
 
</div>

Fiddle Demo

(Изначально я установил border собственность, но изменил его, чтобы соответствовать код в вашем вопросе.)

источник

2013-10-03 12:22:12 Harry

23 секунд слишком медленно :( –

Ofcourse, Я забыл добавить его. Ура! – user2765804

Если этот ответ решил вашу проблему, пожалуйста, отметьте его как «принятый» –

Вы не установки каких-либо border-top свойства в ваших стилях без зависания. Браузер не знает, к чему вернуться, поэтому он просто прыгает.

Просто добавьте в #menuitem:

border-top: 0px solid #000

(или любой цвет, который вы хотите перейти от, белый без цвета перехода на всех)

источник

2013-10-03 12:22:35

как этот

demo

css

#menuitem:hover { 
    border-top: none; 
}

источник

2013-10-03 12:25:22 falguni

Однако это никогда не покажет никакого перехода. –

@Fags: К сожалению, первоначально не заметил. Вы поместили границу как никого в 'hover'. OP хочет границу, но у нее есть переход и выход. Я оставляю +1 как есть (частично потому, что теперь он заблокирован: D) – Harry

вместо

border-top: 12px solid #FFF;

Дайте этот CSS Code

box-shadow:inset 0px 12px 0px 0px #000

http://jsfiddle.net/MhkTT/2/

источник

2013-10-03 12:36:59

@ user2765804 Я думаю, это поможет вам –

Если мы дадим границу, она будет толкать элемент вниз, поэтому Box-shadow: inset id good вариант –

Переход верхнего края не работает должным образом

ответ

Смежные вопросы