Question

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

div {
  visibility: hidden;
  opacity: 0;
}

但是我的元素需要重叠，就像在哪里，另一个必须显示。有了显示，这很简单，但有了这个，我不知道如何做到这一点，而不会让它太乱。

有人可以帮帮我吗？这是我的代码的基本概要：

＆＃13;

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

＆＃13;

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

＆＃13;

谢谢。

Answer 1

为容器添加positon: relative，内部div positin: absolute然后使用悬停状态和不透明度。

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

显示另一个没有display：none的元素

1 个答案: