鼠标悬停div时显示Button失效，如何实现按钮置顶可见？

你当前代码失效的核心原因是选择器用错了：

• 你写的.foo:hover + .btn是相邻兄弟选择器，它只会匹配.foo元素后面紧挨着的同级兄弟元素中的.btn。
• 但你的<button class="btn">是.foo的子元素，不是同级兄弟，所以这个选择器根本找不到目标按钮，自然不会触发显示效果。

修正方案 #

把CSS里的相邻兄弟选择器改成后代选择器，同时调整按钮的z-index确保它在遮罩文字上方，避免被遮挡：

修正后的CSS代码

#box{ background-color: red; } 
.btn { 
  position: relative; 
  z-index: 2; /* 调高z-index，保证按钮在遮罩文字上方 */
  display: none; 
} 
/* 改用后代选择器，匹配.foo内部的.btn子元素 */
.foo:hover .btn{ 
  display: inline-block; 
} 

/* 以下是你原有的其他样式，无需修改 */
.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; }

HTML代码（和你原来一致，无需改动）

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

效果说明 #

修改后，当鼠标悬停在红色的.foo容器上时，内部的view按钮就会从隐藏状态变为显示，同时因为z-index:2的设置，按钮会始终在遮罩层和文字的上方，保证可以正常被点击和查看。

内容的提问来源于stack exchange，提问作者user9269971