CSS 中的悬停叠加图像

Question

我需要一个带有图片 bg 的 div 来在悬停时覆盖图像（具有一定程度的透明度）。我需要能够拥有一个透明的覆盖层，可以在整个网站的任何图像上使用和重复使用。至少可以说，我的第一次尝试是迂回的。因为我发现你不能滚动一个不可见的div，所以我设计了一个三明治系统，其中原始图像是第一层，覆盖层是第二层，原始图像又是第三层。这样，当您将鼠标悬停时，原始图像就会消失，露出原始图像上的覆盖图像：

http://www.nightlylabs.com/uploads/test.html

所以它有效。有点。由于您无法与可见性：不可见元素进行交互（为什么？！），除非您将光标放在其上，否则滚动会闪烁。

有什么帮助吗？这种方法很糟糕，如果有人有更好的方法，请评论。

Answer 1

我使用了以下 css，效果很好。

#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;}

Answer 2

图像会闪烁，因为您无法将鼠标悬停在不存在的东西上。
如果您将其正常分层（无需 z-index）并使其透明，则它将起作用，以便它仍然显示并可以悬停在其上。
第二个图像不会闪烁，您可以使用 span 标签控制样式。以下是我使用的一些 CSS：

img.side
    {position:absolute;
    border:1px solid black;
    padding:5px 5px 5px 5px;
    float:center;}
    /*normal base images*/

img:hover+span
        {display:block;}
    /*new images. automatically display beneath base/hover image*/

.side:hover
        {opacity:0;}
    /*base images again, only when hovered over*/

span
        {display:none;
        cursor:pointer;}

hover 标签确定基本 img（和基本 div）的样式，hover+span 定义仅在悬停时出现的 img 的样式。

这是完整显示 div 的 html：

    <div class="only" id="one">
            <img class="side" id="ach" src="ach.svg">Academic</a>
                <span>
                <img class="hovering" id="hach" src="Hach.svg">Academic</a>
                </span>
        </div>

希望这会有所帮助。