：专注于img

Question

我有一个很好的投资组合，但我正在为它构建一个CMS，这样我就可以上传图片并将它添加到网站上。在构建它之前，我正在重建一些杂乱无章的代码，并将JS驱动的库转换为CSS驱动的库。

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

我以为我可以通过：焦点选择器来做到这一点，但我遇到了一个小问题。

这是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，但它显示了正在发生的事情。

E.g。

<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图像前不会显示 - 你只是要获得缩略图的拉伸版本。但我认为这是一个不同的问题）

Answer 2

:focus仅适用于接收键盘输入的元素（即表单元素）。您可以尝试:active但它只会在鼠标按钮关闭时应用CSS。