你怎么得到：在悬停之后

Question

我想知道可以.class:hover .other_class:after

示例：

a.image-slide-anchor:after{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background:rgba(0,0,0,0.7);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    cursor: pointer;                                                            
}                                                 
.text:hover a.image-slide-anchor:after{ 
    opacity: 1;
}

Answer 1

是的，但您应该将position: relative添加到a元素，以便:after元素具有其大小和位置的参考：

.text {
  background: #ddd;
  width: 300px;
  height: 200px;
  padding: 60px;
}

a.image-slide-anchor {
  position: relative;
}

a.image-slide-anchor:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  cursor: pointer;
}

.text:hover a.image-slide-anchor:after {
  opacity: 1;
}

<div class="text">
  <a class="image-slide-anchor">Why don't you try it?</a>
</div>