Как скрыть/показать border при наведении мышки?

Question

[Антон]

Как сделать, если наводишь мышкой, то border-bottom:0px solid grey становится 1px;
А если мышку отвел в сторону, то через 5 секунд border-bottom: опять 0 px;

.top-search-form__search-query {
    height: 26px !important;
    border-radius: 0px !important;
    width: 150px !important;
    padding-left: 11px;
    line-height: 32px;
    font-size: 14px;
 background: #fff !important;
    color: #000 !important;
border-bottom:0px solid grey;
}

<input type="text" name="q" class="top-search-form__search-query" placeholder="">

Answer 1

[DevMan]

Свойство hover. htmlbook.ru/css/hover
JS тут вообще не нужен.

Comments

[Антон]

Я знаю про hover, но как задается через него тайминг? никак же.

[DevMan]

Антон, откройте для себя transition.

[Антон]

DevMan, а...да..забыл)

[Exploding]

Антон, и вообще, лучше для таких целей использовать тень например или before/after, а то где-то да будет "прыгать". Или уже если прям бордер нужно - то не толщиной, а цветом (прозрачностью) манипулировать, оставляя толщину неизменной.

[Павло Пономаренко]

Чтобы не прыгало можно использовать свойство outline

[AngReload]

Чесговоря, не видел что бы использовалось outline, а вот box-sizing: border-box постоянно.
Для форм outline обычно применяют чтобы показать состояние :focus, а не :hover.

Answer 2

[Danil Isaev]

.top-search-form__search-query {
    height: 26px !important;
    border-radius: 0px !important;
    width: 150px !important;
    padding-left: 11px;
    line-height: 32px;
    font-size: 14px;
    background: #fff !important;
    color: #000 !important;
    border-bottom: 0px solid grey;
    transition-property: border-bottom;
    transition-delay: 5s;
}
.top-search-form__search-query:hover {
    border-bottom: 1px solid;
    transition-property: border-bottom;
    transition-delay: 0s;
}