<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标悬浮换色</title>
<style>
//使用css完成效果
//鼠标悬浮之后将该行背景色改为红色
/* tr:hover
{
background-color: red;
}
//鼠标点击之后将该行的背景色改为蓝色
tr:active
{
background-color:blue;
} */
</style>
</head>
<body>
<table border="1px">
<tr>
<td>总之，岁月漫长</td>
<td>然而值得等待</td>
<td>凡为过去</td>
<td>皆为序章</td>
</tr>
<tr>
<td>花开如火</td>
<td>也如寂寞</td>
<td>鲸落海底</td>
<td>哺育众生十五年</td>
</tr>
<tr>
<td>一星陨落</td>
<td>暗淡不了星空璀璨</td>
<td>一花凋零</td>
<td>荒芜不了整个春天</td>
</tr>
</table>
<script>
var tr = document.querySelectorAll("tr");
/* console.log(tr); */
//使用JavaScript实现鼠标悬浮换色效果
for (var i = 0; i < tr.length; i++) {
tr[i].onmouseover = function () {
this.style.backgroundColor = "blue";
}
tr[i].onmouseout = function () {
this.style.backgroundColor = "";
}
/*
点击修改背景颜色
tr[i].onclick = function () {
for (var j = 0; j < tr.length; j++) {
tr[j].style.backgroundColor = "";
}
this.style.backgroundColor = "red";
} */
}
</script>
</body>
</html>
鼠标悬浮修改表格背景颜色（js/css）
猜你喜欢
转载自blog.csdn.net/heart_is_broken/article/details/121095891
今日推荐
周排行