当您在锚点的所述页面上时，如何更改锚点内的图像

Question

一旦单击了（锚点），如何更改另一个图像（完全相同的宽度和高度）的图像（在锚点内）？ - 使用CSS

所以...

<a href="http://etc.co.uk/"><img src="etc.png"></a>

我希望我的etpng在您点击锚点后显示为不同的图像。有任何想法吗？如果有人可以帮我解决这个问题，那就太爱了

Answer 1

我首先假设您正在谈论锚链接或目标空白链接 - 否则，如果用户离开页面，我看不到更改图像的重点。

对于这种情况，没有完美的CSS解决方案。您可以使用链接的伪类进行播放，并将图像设置为a的背景。

HTML：

<a href="http://etc.co.uk/" class="etc-link" target="_blank"></a>

CSS：

a.etc-link {
    background: url("blah.jpg") center center no-repeat;
    display: block;
    height: 10px;
    width: 10px;
}

使用：有效

a.etc-link:active {
    background-image: url("blah-active.jpg");
}

Pro：接受背景图片属性

缺点：链接打开后丢失

使用：已访问

只能使用少量css属性:visited：背景颜色，颜色和边框/轮廓颜色。您最终可以使用background-color和具有透明度的png文件。

需要注意的一点是:visited只要在用户浏览器历史记录中就是持久的。

使用Javascript

当然，如果你可以使用Javascript，那就更好了。你不需要jQuery，这个简单的行就可以了：

<a href="http://etc.co.uk/" target="_blank" onclick="this.firstElementChild.src='etc-active.jpg'"><img src="etc.jpg" /></a>

Answer 2

你可以这样做

{{1}}