Блог

Я создал эффект наведения курсора при наведении курсора мыши на навигационную кнопку, однако он просто возвращается на место, когда мышь уходит. Мне интересно, как правильно добиться эффекта включения и выключения наведения.

Я попытался добавить код перехода как к a, так и к a: hover, однако, когда я это делаю, возникает какой-то странный нежелательный эффект перехода каждый раз, когда я перехожу на страницу или обновляю ее.

Вот код:

 nav a {
text-decoration: none;
padding: 25px 20px;
transition-property: background color ease-in-out;
transition-duration: 300ms;
transition-timing-function: linear;
}
nav a:hover {
background-color: #28292B;
transition-property: background color ease-in-out;
transition-duration: 300ms;
transition-timing-function: linear;
}
  

Спасибо всем!

Вместо этого сделайте это так:

  nav a {
text-decoration: none;
padding: 25px 20px;
-o-transition:.5s ease-in-out;
-ms-transition:.5s ease-in-out;
-moz-transition:.5s ease-in-out;
-webkit-transition:.5s ease-in-out;
transition:.5s  ease-in-out;
}
nav a:hover {
background-color: #28292B;
    color:white;
}
  

Пример JSFiddle

Просто и легко.:)