css - :focus on a img

Question

我有一个工作正常的作品集，但我目前正在为它构建一个 CMS，这样我就可以简单地上传图像并将它添加到我的网站上。在我构建它之前，我正在重建一些零散的代码并将 JS 驱动的画廊转换为 CSS 驱动的画廊。

我正在尝试在 CSS 中实现这种点击效果。 http://www.tomdwyerdesign.com/graphics/

我以为我可以通过 :focus 选择器来完成，但我遇到了一个小问题。

这是 HTML:

<a class="tile" href="#">
        <img src="images/thumbs/DLPWD.png" class="dlpwd" />
</a>

这是CSS:

.tile:focus img{
background-image: url("images/large/DLPWD.png");
width: 771px;
height: 600px;
}

它似乎没有正确选择它。有谁知道为什么吗？

谢谢。

Answer 1

问题是链接在被点击时不一定是聚焦的，它是在您导航到它时聚焦的。您可以使用键盘执行此操作，也可以向链接添加点击处理程序。当然，此时您又回到了 javascript，但它显示了正在发生的事情。

例如

<a class="tile" href="#" onclick="this.focus()">
    <img src="images/thumbs/DLPWD.png" class="dlpwd" />
</a>

幸运的是，有更好的解决方案，而且不需要 javascript。如果您将 tabindex 添加到链接，即使 href 无处可去，单击它也会聚焦它。所以……

<a class="tile" href="#" tabindex="0">
    <img src="images/thumbs/DLPWD.png" class="dlpwd" />
</a>

应该做你想做的。

(您的下一个问题是背景图像在 src 图像前面不可见 - 您只会得到缩略图的拉伸(stretch)版本。但我认为这是一个不同的问题)