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

您可以选择-runfw: org.apache.felix.framework;version='[4,5)' -runee: JavaSE-1.8 -runsystemcapabilities: ${native_capability} -resolve.effective: active;skip:="osgi.service" -runbundles: \ org.apache.felix.dependencymanager,\ org.apache.felix.dependencymanager.runtime,\ org.apache.felix.dependencymanager.shell,\ org.apache.felix.metatype,\ org.apache.felix.eventadmin,\ org.apache.felix.configadmin,\ org.apache.felix.log,\ org.apache.felix.gogo.command,\ org.apache.felix.gogo.runtime,\ org.apache.felix.gogo.shell,\ launcher;version=latest,\ ui;version=latest,\ mainscreen;version=latest -runsystempackages: javafx.application,javafx.scene,javafx.stage,javafx.scene.layout,javafx.event,javafx.collections,javafx.scene.control,javafx.scene.paint,javafx.scene.shape这样的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;
}

徘徊在“除了”之外的所有“聚光灯”效果：如何使光滑＆amp;轻松悬停过渡？

1 个答案: