Html 图像上的黑色覆盖悬停，当我们进入页面时应保持活动状态

我正在处理四幅图像，每幅图像都有一个链接，单击它会将我们带到另一个页面。现在我的问题是，我想在悬停的图像上做一个黑色的覆盖，当图像被点击并带我们到另一个页面时，它会保持该覆盖的活动状态

我在头版有四张图片，在内页有相同的图片

以下是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>

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

它为我工作，但覆盖不是来的图像。我还希望，图像保持活跃的覆盖，当我们进入网页，这是与此图像链接

第一个问题解决了，当在页面内部使用覆盖使图像处于活动状态时，我已经这样做了-> 以下是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>

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

但它会使图像消失。当我挡住这个位置时，它会回到图像的背面。现在该怎么办。

至少在现代浏览器中，这（或类似的东西）会给你带来你想要的效果：

#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规则

编辑：活动类的选择器也需要

：after

伪元素。CSS规则类似于：

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

抱歉没有说清楚

---

（这些东西真是太棒了！）

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

假设在一个名为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="" />

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

---

我认为CSS中没有办法避免这种行为。

将当前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: '';
}

---

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

“它对我有用”-什么有用？那么，当单击图像时，您是否正在重定向到另一个页面？如果是这样的话，显然你不能在当前页面中保持覆盖。不过，您可以在加载的页面中显示一个覆盖图。@TJ:不，亲爱的，它不起作用，但现在起作用了。我的下一个问题是使该图像在页面内的覆盖图处于活动状态。@TJ:制作覆盖图的第一个问题由SimonR的解决方案解决。：这工作得很好。现在我的下一个问题是，当用户单击该图像时，它会将他们带到另一个页面anotjer页面。这些图像再次放置在何处。现在我希望该图像以覆盖方式处于活动状态。我如何实现这一点。您将您的

.active

类添加到与当前页面对应的框中。您是否将其添加到

sc23 CAB

页面的第一个图像中？@Eliel:我已编辑了我的问题。当我给出该类时，请检查活动它会删除图像，当我从活动css中阻止该位置时，它会返回，但在图像后面有覆盖，请检查编辑的问题现在这正是我想要的，它甚至可以解决图像宽度的问题，因为我的图像两侧都有空白。非常感谢您宝贵的帮助。

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