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

问题

Chris Coyier once posted an article on CSS-Tricks website on how to achieve this effect:

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

But what I'm also trying to achieve is smooth and easy hover transitions. I'm just not sure how or where to insert the "smooth hover transition" part of the code.

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; }

Please help.

回答1:

You can select a like this 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>

来源：https://stackoverflow.com/questions/36377379/hover-on-everything-but-aka-spotlight-effect-how-to-make-smooth-easy-hove