Question

我有一个图片超链接。我希望在链接访问状态时更改图像。你能告诉我怎么做吗？最好不要使用JavaScript。

我正在尝试执行以下操作：我在单个常见图像中加入了我的图像，这是我的代码：

<a href="#" class="mylink">
   <img src="common_image.jpg" width="240px" height="240px"/>
</a>

我的风格：

    .mylink {
        width: 120px;
        height: 240px;
        display: block;
        overflow: hidden;
    }

    .mylink:visited img {
        margin-left: -120px;
    }

Answer 1

您无法通过CSS更改图像的src - 属性。如果由于某种原因，它必须是img-element，那么你就会被JavaScript用于修改。

另一种选择是摆脱img - 元素，而只使用带背景的锚点。 background - 属性可以通过CSS控制。

以下是:hover :hover的{{3}}，但在您的情况下，:visited可以轻松更改为a.mylink { width: 120px; height: 240px; display: block; overflow: hidden; background: url(sprite.png) no-repeat; } a:visited.mylink { background-position: 0 -240px; }。

如果将“visited”图像放在名为sprite.png的文件中的默认图像下面，则代码为：

{{1}}

在此处观看：simple example（为简单起见，使用背景色代替图片）

Answer 2

使用：为背景图像访问的伪选择器不起作用。主流浏览器存在安全限制，以防止漏洞利用。见this StackOverflow question

Answer 3

您可以删除图像并通过css控制背景

.mylink {
    background:url('myimagepath-01.jpg') top left no-repeat;
    width: 120px;
    height: 240px;
    display: block;
    overflow: hidden;
}

.mylink:visited {
    background:url('myimagepath-02.jpg') top left no-repeat;  
}

Answer 4

你可以试试这个：

HTML：

<a href="http://google.com" class="image">Link</a>

CSS：

.image {
    background: transparent url('http://javascript.info/files/tutorial/browser/events/rollover-sprite/button.png') no-repeat top left;
    width: 186px;
    height: 52px;
    display: block;
    text-indent: -9999px;
}
.image:hover {
    background-position: 0 -52px;
}
.image:visited {
    background-position: 0 -104px;
}

如果要使用精灵，则应将图像设置为css背景，并使用background-position属性移动其位置。您可以在this fiddle中看到一个示例。

CSS。更改图像访问链接

4 个答案: