JS鼠标进入某行时,当前行背景色设置为红色,其余行设置为白色
时间: 2024-02-25 19:52:41 浏览: 22
好的,这是一个比较基础的前端问题,可以使用 JavaScript 和 CSS 来实现。可以采用以下步骤:
1. 使用 JavaScript 获取到所有需要设置背景色的行元素,例如使用 `document.querySelectorAll` 方法获取到所有行元素。
2. 给每个行元素添加 `mouseenter` 和 `mouseleave` 事件监听器,分别监听鼠标进入和离开事件。
3. 在 `mouseenter` 事件监听器中,将当前行元素的背景色设置为红色,其余行元素的背景色设置为白色。可以使用 `this` 关键字获取当前行元素,然后使用 CSS 样式设置背景色。
4. 在 `mouseleave` 事件监听器中,将所有行元素的背景色设置为白色。
下面是一个基本的代码示例:
```html
<style>
.row {
background-color: white;
}
.row.active {
background-color: red;
}
</style>
<table>
<tr class="row">
<td>Row 1</td>
</tr>
<tr class="row">
<td>Row 2</td>
</tr>
<tr class="row">
<td>Row 3</td>
</tr>
</table>
<script>
const rows = document.querySelectorAll('.row');
for (let i = 0; i < rows.length; i++) {
rows[i].addEventListener('mouseenter', function() {
this.classList.add('active');
for (let j = 0; j < rows.length; j++) {
if (j !== i) {
rows[j].classList.remove('active');
}
}
});
rows[i].addEventListener('mouseleave', function() {
for (let j = 0; j < rows.length; j++) {
rows[j].classList.remove('active');
}
});
}
</script>
```
希望能够帮到你!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)