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

<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显示。


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页