「すべてを除いて」「スポットライト」エフェクト：スムーズで簡単にホバートランジションを行う方法</p> <pre><code>ul:hover li:not(:hover) { opacity: .5; } </code></pre> <p>しかし、私はまた、達成しようとしているスムーズかつ簡単にホバー遷移です：

Question

クリスCoyierは、かつてこの効果を達成するためにどのようにCSS-トリックのウェブサイトに記事を掲載しました。私はちょうどコードの "滑らかなホバートランジション"の部分を挿入する方法や場所がわかりません。

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

あなたはこの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>