0

我有一个工作正常的作品集，但我目前正在为它构建一个 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;
}

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

谢谢。

4

2 回答 2

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 图像前不可见 - 您将获得缩略图的拉伸版本。但我认为这是一个不同的问题）

于 2012-11-04T22:24:21.327 回答
0

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

于 2012-11-04T22:05:15.807 回答