css 鼠标点击过后变色 |css3图片响应式布局

// 代码片段
.target {
background-color: red;
}
.target:active {
background-color: blue;
}

以上代码中，大家首先定义了一个目标元素.target，并为其设置了红色背景色。接着，大家使用了伪类选择器:active，也就是当鼠标在.target上按下的时候触发，为元素设置了蓝色背景。

通过这样的设置，大家就能够在目标元素被鼠标点击的时候，达到变色的效果。

需要注意的是，:active是一种短暂的状态，当鼠标松开时，元素又会回到原本的状态。

当然，除了使用:active伪类实现鼠标点击过后变色，大家也可以使用JavaScript来实现。比如，大家可以使用事件监听函数，监听目标元素的mousedown和mouseup事件，为元素添加相应的样式。

// 代码片段
const target = document.querySelector(".target");
target.addEventListener("mousedown", () =>{
target.style.backgroundColor = "blue";
});
target.addEventListener("mouseup", () =>{
target.style.backgroundColor = "red";
});

以上代码中，大家先通过querySelector方法获取了目标元素，并分别为它添加了mousedown和mouseup事件监听函数。当鼠标按下时，大家使用style属性将目标元素的背景色改为蓝色，当鼠标松开时，将背景色改回红色。

无论是使用CSS还是JavaScript，实现鼠标点击过后变色都非常简单。但需要注意的是，这种效果可能会对用户体验造成一定的影响，所以在具体实现的过程中，还需要根据实际情况进行调整。