Наведите указатель мыши на "все, кроме" aka "spotlight": как сделать гладкие и легкие переходы на hover?

Question

Chris Coyier раз опубликовал статью на сайте CSS-Tricks о том, как добиться этого эффекта:

ul:hover li:not(:hover) { opacity: .5; } 

Но что я также пытаюсь достичь гладкой и легко при наведении курсора переходы. Я просто не знаю, как и где вставить часть кода «плавный переход».

a { 
    color: #cccccc; 
    -webkit-transition: color .5s linear; 
    -moz-transition: color .5s linear; 
    -ms-transition: color .5s linear; 
    -o-transition: color .5s linear; 
    transition: color .5s linear; 
} 

a:hover { color: #000000; } 

Просьба помочь.

Answer 1

Вы можете выбрать a как этот ul:hover li:not(:hover) a

ul { 
 
    list-style-type: none; 
 
} 
 
li a { 
 
    transition: all 0.4s linear; 
 
    text-decoration: none; 
 
    color: black; 
 
    font-size: 20px; 
 
} 
 
ul:hover li:not(:hover) a { 
 
    color: lightblue; 
 
}

<ul> 
 
    <li><a href="">Lorem ipsum dolor.</a></li> 
 
    <li><a href="">Lorem ipsum dolor.</a></li> 
 
    <li><a href="">Lorem ipsum dolor.</a></li> 
 
    <li><a href="">Lorem ipsum dolor.</a></li> 
 
    <li><a href="">Lorem ipsum dolor.</a></li> 
 
</ul>