如何改变图像src的点击只使用CSS而不是JS

py49o6xq  于 2023-04-08  发布在  其他
关注(0)|答案(2)|浏览(118)

我需要改变的src的图像上鼠标点击只与css一样

img:active {
}
yh2wf1be

yh2wf1be1#

您可以使用content属性的元素替换功能来实现这一点。
请注意,您不能使用此技术设置任何ARIA或其他与辅助功能相关的功能,因此您传达的信息可能会丢失给您的部分用户群。(这可能是非法的,具体取决于该信息是什么,您是谁,以及您处于/销售的控制权)。
您可能希望设置tabindex或将图像 Package 在一个按钮中,以使其键盘/等可访问。
另外要注意的是:active的意思是“While being clicked on”而不是“After being clicked on”。CSS没有“after being clicked on”的伪类(尽管:focus在某些情况下可以满足)。

img:active {
    content: url(http://placekitten.com/200/200);
}
<img src="http://placekitten.com/g/200/200" alt="">
lhcgjxsq

lhcgjxsq2#

你不能仅仅通过css操作图片的src。但是你可以尝试使用图片作为图片的父背景,并通过css更改背景,就像:

.image-parent { background-image: url('myurl...')} ;
.image-parent:active {background-image: url('anotherurl...')}

希望能帮上忙。

相关问题