替换悬停，仅针对单击事件css

Question

在此链接上，我不想将鼠标悬停在图像上，而是仅在我单击主图像时才显示其他图像。我尝试替换目标，焦点的伪类，但没有一个工作。有没有办法只用css做到这一点？因为我的CMS不允许我插入javascript。

谢谢， 布鲁诺

Answer 1

Stuff you can do with the “Checkbox Hack”

可以与HTML结合使用，而不仅仅是css。您必须结合<label>元素使用已检查的css事件，您还必须在文档中的某处隐藏一些复选框。它非常hacky，这一切都在文章中描述。

Answer 2

可以这样做。链接没有注册：focus 事件有一个问题，如果你导航到TAB链接，它会注册它们。但这对用户来说是个问题。无论如何，你可以使用它来克服这个问题。只需在链接上放置 tabindex

即可

<a href="#" tabindex="0">
    <img src="1.png">
</a>

在你的CSS上：

a:focus img{
    content:"xxx";
    width:XXpx;
    height:XXpx;
    /*Whatever you need here*/
}