html - 在另一个没有显示的地方显示元素 : none

Question

我需要一个元素出现在另一个元素所在的位置，为了举个例子，让我们说悬停。而且我需要使用 CSS 动画来使其过渡更平滑。所以我不能使用显示属性。相反，我必须使用它，对吧？

div {
  visibility: hidden;
  opacity: 0;
}

但我的元素需要重叠，就像一个元素所在的位置，另一个元素必须显示。有了显示，这很容易，但有了这个，我不知道如何做到这一点又不会让它太乱。

有人能帮帮我吗？这是我的代码的基本概要:

.first-outline .first:hover {
  visibility: hidden;
  opacity: 0;
}
.first-outline .second {
  visibility: hidden;
  opacity: 0;
}
.first-outline:hover second {
  visibility: initial;
  opacity: 1;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<li class="list-group-item first-outline">
  <p class="first">First</p>
  <p class="second">Second</p>
</li>

<!-- Or something like this, but it still doesn't work -->

<li class="list-group-item second-outline">
  <span class="first">First</span>
  <span class="second">Second</span>
</li>

谢谢。

Answer 1

给容器一个 positon: relative 和内部 div positin: absolute 然后玩悬停状态和不透明度。

添加过渡属性以获得平滑效果

.first-outline {
  position:relative;
}

.first-outline .first, .first-outline .second {
  position: absolute;
  top: 0 ;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 500ms linear;
  -webkit-transition: opacity 500ms linear;
  -moz-transition: opacity 500ms linear;
}
  
.first-outline:hover .first, .first-outline .second {
  opacity: 0;
}

.first-outline:hover .second {
  opacity: 1;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<li class="list-group-item first-outline">
  <p class="first">First</p>
  <p class="second">Second</p>
</li>