如何鼠标悬浮显示隐藏图片

<a class="show_img" href="file.xlsx">EXCEL模板</a>
<div class="hide_img"><img src="img/imgShow.png"></div>

.hide_img{ display:none; z-index:9999; position:absolute;}
.show_img:hover +.hide_img{ display:block} 

上面代码很好理解，但是我想再分享一下css选择器，我在编码过程中就忘记了，css选择器的强大的作用。

代码中涉及到相邻兄弟选择器，因此在这里想记录一下。

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

在hover后面增加兄弟选择器+，才能让img显示。