替换悬停，仅适用于单击事件css

Question

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

感谢， 布鲁诺

Answer 1

可以做到这一点。有一个问题，链接不注册：焦点事件，如果您导航到与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*/ 
} 

Answer 2

Stuff you can do with the “Checkbox Hack”

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