Question

当我将鼠标悬停在每个项目上时，如何使用我所拥有的CSS箭头（见下文）并让它们淡入淡出？

我的CSS：

#menu li {
  position:relative;
}

#menu li a:after {
  content: " .";
  display: block;
  text-indent: -99em;
  border-bottom: 0.6em solid #1c525a;
  border-left: 0.6em solid transparent;
  border-right: 0.6em solid transparent;
  border-top: none;
  height: 0px;
  margin-left: -.6em;
  margin-right: auto;
  margin-top: -7px;
  position: absolute;
  left: 50%;
  width: 1px;
}

所有代码均可用in a jsFiddle。

Answer 1

为此，我添加了以下内容：

#menu li a:after {
  -webkit-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}

#menu li:hover a:after {
  border-bottom: 0.6em solid #1c525a;
  -webkit-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}

See the jsFiddle - 我确定这段代码可以清理或删除，但我没有在Stack Overflow上找到这样的示例/答案，所以我想我会添加它。

CSS箭头不透明度转换

1 个答案: