悬停在 "everything but" 又名 "spotlight" 效果：如何使悬停过渡平滑轻松？

Question

Chris Coyier 曾在 CSS-Tricks 网站上发表过一篇关于如何实现此效果的文章：

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

但我还想实现的是平滑和轻松的悬停过渡。我只是不确定如何或在何处插入代码的 "smooth hover transition" 部分。

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

你可以这样selectaul: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>

悬停在 "everything but" 又名 "spotlight" 效果：如何使悬停过渡平滑轻松？

Hover on "everything but" aka "spotlight" effect: how to make smooth & easy hover transitions?

css

hover