将鼠标悬停在“除...以外的所有内容"上亦称“聚光灯"效果:如何使&容易的悬停过渡? [英] Hover on "everything but" aka "spotlight" effect: how to make smooth & easy hover transitions?

问题描述

Chris Coyier曾经在CSS-Tricks网站上发布了有关如何实现此效果的文章:

  ul:hover li:not(:hover){不透明度:.5；} 

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

  a {颜色:#cccccc;-webkit-transition:颜色.5s线性；-moz-transition:颜色.5s线性；-ms-transition:颜色.5s线性；-o-transition:颜色.5s线性；过渡:颜色.5s线性；}a:悬停{颜色:#000000;} 

请帮助.

解决方案

您可以选择 a 这样的 ul:hover li:not(:hover)a

  ul {list-style-type:无；}li a {过渡:所有0.4s线性；文字修饰:无；颜色:黑色;font-size:20px;}ul:hover li:not(:hover)a {颜色:浅蓝色；}  

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

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.

解决方案

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>

这篇关于将鼠标悬停在“除...以外的所有内容"上亦称“聚光灯"效果:如何使&容易的悬停过渡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！