div悬停上可见的按钮

Question

I am trying to make the button visible when the user hovers on the div yet not working.

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

the button display is initially set to none . and when the users hover on the div it is set to inline-block . what can I do to get the button on top and visible when the user hovers on the div

Answer 1

Just change your + sign to a > sign. The button is inside the div, not on the same level as it. + is for items on the same level

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

Answer 2

You're almost there, but to select the button, you need > (child combinator) to select the child of the hovered div . Use + when selecting subsequent siblings .

 /*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*/ #box { background-color: red; } .btn { position: relative; z-index: 1; display: none; } .foo:hover>.btn { display: inline-block; } 

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

Answer 3

The + combinator selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent. .btn is'nt sibling for .foo ,but it is his children. so remove + selector.

Change :

.foo:hover + .btn{

To:

.foo:hover .btn{

 .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; } #box{ background-color: red; } .btn { position: relative; z-index: 1; display: none; } .foo:hover .btn{ display: inline-block; } 

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