Использование transition-delay

by webref

HTML

<div>
  <p>Наведите курсор на серую область</p>
  <a>Без задержки</a>
  <a class="with-delay">С секундной задержкой</a>
</div>

CSS

div {
   background: lightgrey;
   padding: 1rem;
   width: 400px;
 }
 
 div p {
   color: grey;
   margin-top: 0;
 }
 
 a {
    background: blue;
    color: white;
    padding: 5px 10px;
    text-decoration: none;
    transition: all 1s;
}
 
 div:hover a {
   background: red;
 }
 
 a.with-delay {
   transition-delay: 1s;
 }