Hover-антипод, как сделать при отведении мыши обратный эффект медленным?

#css #css3 #hover

Хотел сделать чтобы при наведении менял цвет, а при отведении с такой же скоростью
обратно. Но получилось что обратно он возвращает цвет моментально, подскажите как сделать?



a {
  font-family: pf_square_sans_proregular;
  text-decoration: none;
  color: #000000;
  padding: 7.5px 10px 7.5px 8px;
  height: 30px;
  width: 222px;
  display: block;
}

a:hover,
li {
  background: #171B25;
  transition: all 2s ease;
}

a:hover .text {
  color: white;
  transition-duration: 0.5s;
}

  
  
Играть




    

Ответы

Ответ 1

a {
  font-family: pf_square_sans_proregular;
  text-decoration: none;
  color: #000000;
  padding: 7.5px 10px 7.5px 8px;
  height: 30px;
  width: 222px;
  display: block;
  transition: all 2s ease;
}

a:hover,
li {
  background: #171B25;
}

a:hover .text {
  color: white;
  transition-duration: 0.5s;
}

  
  
Играть





Transition перенести необходимо