javascript - 按钮在 div 悬停时可见

Question

我试图在用户将鼠标悬停在 div 上但不起作用时使按钮可见。

#box{
background-color: red;
}

.btn {
  position: relative;
  z-index: 1;
  display: none;
}

.foo:hover + .btn{

display: inline-block;
}
/*ignore from here*/
.foo {
    position:relative;
    width:500px;
    height:500px;
    
}
.foo img {
    width:100%;
    vertical-align:top;
}
.foo:after, .foo:before {
    position:absolute;
    opacity:0;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}
.foo:after {
    content:'\A';
    width:100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.8);
}
.foo:before {
    content: attr(data-content);
    
    color:#fff;
    z-index:1;
    padding:4px 10px;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  
     
}
.foo:hover:after, .foo:hover:before {
    opacity:1;
 
}

/*ignore to here*/

<div id="box" class="foo" data-content="Caption">
      <button class="btn">view</button>
      </div>

按钮显示最初设置为none。当用户悬停在 div 上时，它被设置为 inline-block。当用户将鼠标悬停在 div 上时，我该怎么做才能使按钮位于顶部并可见

Answer 1

只需将您的 + 号更改为 > 号即可。按钮在div里面，和它不在同一层。 + 用于同一级别的元素

   .foo:hover > .btn{
      display: inline-block;
    }