Html 带顺序消息的悬停过渡延迟

我试图实现的是，当用户在显示实际div内容之前将鼠标悬停在div上时，会出现一条假加载消息

.info {  opacity: 0; width: 200px; height: 300px;transition-duration: 0.3s; transition-delay: 2s;  margin-top: -20px; background-color: #000;}

.info:hover { opacity: 1; transition-duration: 0.3s; transition-delay: 2s; }

.access {opacity: 0.0;  transition-duration: 0.3s; transition-delay: 0.5s; background-color: #000; color: #fff}
.access:hover { opacity: 1;  transition-duration: 0.3s; transition-delay: 0.5s;  }

---

正如您所看到的，消息出现，然后是div，但是消息在div顶部重新出现并淡出-我希望消息在div“加载”后消失。我希望这可以通过CSS单独实现

您可以使用相邻的选择器，在您的长方体的两个不同子对象上设置两个转换

在flow中先加载

.loading

消息，一旦悬停就会显示，然后下一个子项（

+.infos

）会在它上面显示一会儿。从那里，

.infos

接管了

：悬停以保持在顶部

演示：



老实说，我不确定这是否是你想要的过渡。它更适合于动画或Js/JQ。
<div>
  <p class="loading">
    loading ...
  </p>
  <p class="infos">
    Infos
  </p>
</div>

div {
  border:solid;
  width:200px;
  height:200px;
  border:gray solid 5px;
  margin:auto;
  text-align:center;
  position:relative;
}
.loading , .infos{
  position:absolute;
  top:0;
  left:0;
  margin:0;
  height:100%;
  width:100%;
  line-height:200px;
  background:black;
  color:white;
  z-index:5;
  opacity:0;
}
.infos {
  z-index:0;
  background:yellow;
  line-height:1.2em;;
  color:red;
}
.loading:hover {
  opacity:1;
}
.loading:hover + .infos, .infos:hover {
  opacity:1;
  transition:2s 1s;
  z-index:10;
}