图片悬停以显示链接 [英] Image hover to reveal links
本文介绍了图片悬停以显示链接的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
所以我有一个div,其中将包含一个图片 http://www.reversl.net/hovers/ ,我希望图片在悬停时显示两个链接,如此处所示的布局 http://
so I have a div which will include an image http://www.reversl.net/hovers/ and I'd like for the image to reveal two links when hovered like in layout shown here http://www.reversl.net/demo/ Is it possible to achieve this using only css?
推荐答案
另一种方式你可以使用css可以通过display:none / block来实现
Another way you could do it with display:none/block
div.container { width: 200px; height: 200px; position: relative; }
div.container img { width: 100%; height: 100%; position: absolute; top: 0; }
div.container div { width: 100%; position: absolute; top: 0; display: none; }
div.container img:hover + div { display: block; }
div.container div:hover { display: block; }
<div class="container">
<img src="an_img.jpg">
<div> <a href="a link">A link should be here</a> </div>
</div>
这篇关于图片悬停以显示链接的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文