css tr 鼠标按下变色

在CSS中，我们可以通过设置tr:hover样式来改变鼠标悬停的效果，但如果想要让鼠标按下时也有不同的颜色呢？接下来，我将为大家介绍两种方法来实现这一功能。

方法一：使用:active伪类

tr:active {
  background-color: #CCC;
}

通过使用:active伪类，当用户点击时，即可改变tr的背景颜色。这个伪类同样可以用于其他元素上，如a标签、button标签等。

方法二：使用JavaScript

const rows = document.getElementsByTagName("tr");
for (let i = 0; i 
通过JavaScript进行事件绑定，当鼠标按下时给tr添加背景颜色，并在鼠标松开时去除背景颜色。这种方法可以适用于更多的交互效果，如添加点击事件等。

以上两种方法都可以实现效果，使用哪种方法取决于具体需求，如果只需要简单的变色效果，那么可以使用方法一，如果需要更多的交互效果，那么可以使用方法二。