Question

我想要实现的是假加载消息，因为用户在显示实际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;  }

http://jsfiddle.net/499hM/

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

Answer 1

你可以使用相邻的选择器，并在盒子的2个不同的孩子身上设置2个过渡。

流量中的.loading消息，一旦悬停显示，下一个孩子（+ .infos）将在此之后显示出来。从那里开始，.infos接管:hover以保持领先地位。

样本：

http://codepen.io/gc-nomade/pen/jilLp

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

使用顺序消息悬停过渡延迟

1 个答案: