Question

我正在处理四张图片，每张图片都有一个链接，点击后我们会转到另一页。现在我的问题是，我希望在悬停图像时制作黑色叠加层，当点击图像并将我们带到另一个页面时，它将保持活动状态。

我在首页上有四个图像，在内页上有相同的图像。

这是HTML：

<ul class="thumbnails">
    <li class="span3">
        <a href="#">
            <div id="ImageHover">
                <img src="http://209.236.116.120/~sciallin/it/backend/wp-content/uploads/2014/07/model23.png" alt="" />
            </div>
        </a>
    </li>
</ul>

以下是CSS：

<style>
#ImageHover img:hover
{
     background-color:rgba(0,0,0,0.6);
}
</style>

它为我工作但叠加层没有覆盖图像。我还希望当我们进入与此图像链接的页面时，图像保持活动状态。

第一个问题已经解决，当在页面内部使图像激活时，我已经完成了这个 - ＆gt; 这是HTML：

<div id="ImageHover" class="active">
<img alt="" src="http://209.236.116.120/~sciallin/it/backend/wp-content/uploads/2014/07/model23.png">
</div>

这是CSS：

#ImageHover.active {
    background : rgba( 0, 0, 0, 0.5 );
    bottom : 0;
    content : ' ';
    left : 0;
    position : absolute;
    right : 0;
    top : 0;
}

但它会使图像消失。当我阻止位置时，它会返回但是图像的背面。我现在应该怎么做。

Answer 1

这个（或类似的东西）应该会给你效果，至少在现代浏览器中是这样的：

#imageHover {
    position : relative;
}
#imageHover:hover:after {
    background : rgba( 0, 0, 0, 0.6 );
    bottom : 0;
    content : ' ';
    left : 0;
    position : absolute;
    right : 0;
    top : 0;
}

要使效果继续显示用户位于指定页面上，您需要在页面上的相关#imageHover上开课。然后，您可以在悬停样式后添加#imageHover.active作为额外规则。

作为旁注，您可能希望使用类而不是ID，或者您需要为每个imageHover元素添加CSS规则。

编辑： .active类的选择器也需要:after伪元素。 CSS规则将类似于：

#imageHover:hover:after,
#imageHover.active:after {
    /* ...css... */
}

抱歉没有说清楚。

Further reading on pseudo elements（那些东西摇滚！）

Answer 2

使用以下内容替换当前的CSS，并将.active类应用到您的框中。

#ImageHover {
    position: relative;
}

#ImageHover:hover:after,
#ImageHover.active:after {
    background : rgba( 0, 0, 0, 0.5 );
    position: absolute;
    top: 0;
    left: 28px;
    bottom: 15px;
    right: 28px;
    content: '';
}

我修改了位置，以便完美地勾勒出你的盒子，但如果你愿意，你可以改回它。

Answer 3

要在加载下一页时使图像全部处于活动状态，您应该使用哈希属性加载页面。

我们假设您在名为pictures.html的页面上有4张图片，每张图片都有不同的ID：

<img id="image1" class="imageOverlay" src="" />
<img id="image2" class="imageOverlay" src="" />
<img id="image3" class="imageOverlay" src="" />
<img id="image4" class="imageOverlay" src="" />

要在第3张图片处于活动状态时加载页面，请拨打 pictures.html＃image3

然后，在你的CSS中：

.imageOverlay:active {
    /* CSS for image overlay */
}

CSS将应用于具有与URL中的哈希对应的id的图片。您可能遇到的问题是浏览器将在页面加载时滚动到该图像。这是你可能不想要的东西。

我认为在CSS中有一种方法可以避免这种行为。

图像悬停时黑色叠加，当我们进入页面时应该保持活动状态

3 个答案: