在伪之后添加过渡到悬停

Question

我正在尝试为我的扩展添加一个很酷的小不透明度过渡。我已经查找了很多方法来解决这个问题，但到目前为止似乎没有任何效果。这可能吗？我有最新版本的 Chrome。

CSS:

.container .primary:after {
  opacity: 0;
  transition: opacity 6s ease-out;
}

.container .primary:hover:after {
  opacity: 1;
  content: "Go through a list of friends to remove";
  position: absolute;
  top: 100%;
  width: 100vw;
  height: 20px;
  margin: 10px;
  font-size: 13px;
}

Answer 1

很难从您的代码中重现，但存在几个主要问题：

你的伪元素有 top:100% 所以它可能挂在屏幕底部的某个地方。您可以在容器上使用 position:relative 来防止这种情况。
将文本放入伪元素是个坏主意。正如另一位评论者指出的那样，屏幕阅读器无法识别它们。 Here's an in-depth article on the w3 website about this.
你绝对不想过渡 6 秒的东西！尝试坚持最多半秒，否则您的 UI 会感觉很慢。 Here's a great writeup on the subject.

最后，结合上述建议的完整代码段。这无论如何都不完美，但应该足以让您入门：

.container {
  position: relative;
  padding:10px;
  font-family:'Arial';
  border:1px solid black;
}

.container .tooltip {
  opacity: 0;
  transition: opacity 0.4s ease-out;
  position: absolute;
  top: 100%;
  left: 0;
  height: 20px;
  padding:10px;
  font-size: 13px;
}

.container .primary:hover .tooltip {
  opacity: 1;

}

<div class="container">
  <div class="primary">div
  <div class="tooltip">"Go through a list of friends to remove"</div>
  </div>
</div>

在伪之后添加过渡到悬停

Add transition to hover after pseudo

html

css

css-transitions