在CSS的悬停覆盖图像 [英] on hover overlay image in CSS
问题描述
我需要一个div与图片bg来覆盖图像(有一些数量的透明度)时悬停。我需要能够有一个透明的覆盖,可以在任何图像的整个网站使用和重复使用。我的第一次尝试是圆的 - 至少说。因为我发现你不能翻转一个不可见的div,我设计了一个sandwhich系统,其中原始图像是第一层,覆盖是第二层,原始图像再次是第三层。这样,当您翻转时,原始图片会消失,并在原始图片上显示重叠图片:
I need a div with picture bg to overlay an image (with some amount transparency) when hovered on. I need to be able to have one transparent overlay that can be used and reused throughout the site on any image. My first attempt was round-about to say the least. Because I found out you cannot roll-over an invisible div I devised a sandwhich system in which the original image is the first layer, the overlay is the second layer, and the original image is third layer again. This way, when you roll-over, the original image disappears revealing the overlay image over the original image:
http://www.nightlylabs.com/uploads/test.html
所以有用。 Kinda。因为你不能与可见性交互:不可见元素(为什么?!)翻转闪烁,除非你将光标停在它上面。
So it works. Kinda. Because of you cannot interact with an visibility:invisible element (why?!) the roll-over flickers unless you rest the cursor on it.
任何帮助?
推荐答案
我使用下面的css和它的罚款。 p>
I used the following css and its fine.
#container { position:relative; width:184px; height:219px;}
.image { background-image:url(alig.jpg); position:absolute; top:0; left:0; width:184px; height:219px; z-index:2;}
.overlay { background-image:url(aligo.png); position:absolute; top:0; left:0; width:184px; height:219px; z-index:3;}
.top-image { background-image:url(alig.jpg); position:absolute; top:0; left:0; width:184px; height:219px; z-index:4;}
.top-image:hover { background-image:none;}
这篇关于在CSS的悬停覆盖图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!