[html+js][实现鼠标悬停事件]鼠标移动到行自动变色实现

下面是一个示例HTML代码，它创建了一个带有5行3列的表格，并为每一行添加了鼠标事件，当鼠标移到行上时，该行背景颜色变成蓝色，移出时恢复原来的颜色：

其中，onmouseover 和 onmouseout 事件分别表示鼠标移入和移出事件，changeColor() 函数根据传入的参数修改行的背景颜色。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>表格颜色变化</title><style>table, th, td {border: 1px solid black;}</style>
</head>
<body>
<table id="myTable"><tr><th>姓名</th><th>年龄</th><th>性别</th></tr><tr onmouseover="changeColor(this, true)" onmouseout="changeColor(this, false)"><td>张三</td><td>20</td><td>男</td></tr><tr onmouseover="changeColor(this, true)" onmouseout="changeColor(this, false)"><td>李四</td><td>25</td><td>女</td></tr><tr onmouseover="changeColor(this, true)" onmouseout="changeColor(this, false)"><td>王五</td><td>30</td><td>男</td></tr>
</table><script>function changeColor(row, isMouseOver) {if (isMouseOver) {row.style.backgroundColor = "blue";} else {row.style.backgroundColor = "";}}
</script>
</body>
</html>

使用document.getelement改写上面的鼠标事件，解耦

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>表格颜色变化</title><style>table, th, td {border: 1px solid black;}</style>
</head>
<body>
<table id="myTable"><tr><th>Name</th><th>Price</th><th>Stock</th></tr><tr><td>Product 1</td><td>$10</td><td>5</td></tr><tr><td>Product 2</td><td>$20</td><td>10</td></tr><tr><td>Product 3</td><td>$30</td><td>15</td></tr>
</table><script>const table = document.getElementById("myTable");const rows = table.getElementsByTagName("tr");for (let i = 1; i < rows.length; i++) {rows[i].addEventListener("mouseover", function() {this.style.backgroundColor = "blue";});rows[i].addEventListener("mouseout", function() {this.style.backgroundColor = "";});}
</script></body>
</html>

这里我们首先使用 document.getElementById 方法获取表格元素，并获取表格中的所有行。然后使用 addEventListener 方法为每一行添加 mouseover 和 mouseout 事件监听器，当鼠标移入时设置背景色为蓝色，当鼠标移出时恢复原来的颜色。注意在事件处理函数中使用 this 表示当前行的元素。

继续解耦，如果有不同区域的行，可以为表格行添加一个类名，用于选择器。

<table id="myTable"><thead><tr><th>Name</th><th>Price</th><th>Stock</th><th>Note</th></tr></thead><tbody><tr class="table-row"><td>Product 1</td><td>$10.00</td><td>20</td><td>Note 1</td></tr><tr class="table-row"><td>Product 2</td><td>$15.00</td><td>10</td><td>Note 2</td></tr><tr class="table-row"><td>Product 3</td><td>$20.00</td><td>5</td><td>Note 3</td></tr></tbody>
</table>

此时的JS代码为：

const table = document.getElementById('myTable');table.addEventListener('mouseover', function(event) {// 如果鼠标移入的是表格行，则设置其背景颜色为蓝色if (event.target.classList.contains('table-row')) {event.target.style.backgroundColor = 'blue';}
});table.addEventListener('mouseout', function(event) {// 如果鼠标移出的是表格行，则将其背景颜色恢复if (event.target.classList.contains('table-row')) {event.target.style.backgroundColor = '';}
});

这样，当鼠标移入或移出表格行时，其背景颜色就会相应地变化。由于事件是委托到表格上的，因此不需要为每一行都绑定事件处理器，从而提高了代码的可维护性。

[html+js][实现鼠标悬停事件]鼠标移动到行自动变色实现相关推荐

html js鼠标悬停事件,鼠标悬停在轴标签d3.js javascript上的事件
有没有人知道是否有可能在y轴标签上有鼠标悬停事件? 例如,我在下面有一个散点图. y轴上的标签是"area1","area2"和"area3" ...
Js鼠标悬停事件，简单的实现导航栏鼠标划过内容弹窗的效果。可读性较高的鼠标悬停事件
Js鼠标悬停事件,简单的实现导航栏鼠标划过内容弹窗的效果.可读性较高的鼠标悬停事件 <!DOCTYPE html> <html lang="en"> < ...
如何调试JS中鼠标悬停事件影响的元素？
如何调试JS中鼠标悬停事件影响的元素? 在日常的前端开发中,我们经常要调试许多其他开发者写的网站和代码.此时我们往往会打开浏览器的开发者工具,在 Elements,Console,Network,So ...
python tk 获取鼠标事件_在Tkin中列出鼠标悬停事件函数
我正在制作一个医学工具的图形用户界面作为一个类项目.给定一个条件,它应该输出一堆从不同网站收集的治疗方案,比如webMD.我希望能够处理所列出的任何一种疗法的鼠标悬停事件,以提供关于该疗法的更多信息( ...
vue鼠标移动上去提示_关于如何处理vue中鼠标悬停事件的详细说明
最后,在查看结果中,发现滑过鼠标事件将触发该事件,但它将闪烁并清除. 当鼠标停留在单元格上时鼠标滑过事件,遮罩层将消失并重复出现. 开关. 为了缓解这种情况,setTimeout也用于延迟显示和隐藏在 ...
selenium 鼠标悬停事件
1.鼠标不仅仅可以点击(click),鼠标还有其它的操作,如:鼠标悬停在某个元素上,鼠标右击,鼠标按住某个按钮拖动: 2.鼠标事件需要先导入模块: from selenium.webdriver.co ...
html鼠标的点击事件失效,为什么鼠标悬停事件不起作用呢？
源自:2-3 鼠标悬停事件添加为什么鼠标悬停事件不起作用呢? var area = document.getElementById('moocBox'); var con1 = document.g ...
C#连接数据库、绑定数据，鼠标悬停事件
| 啥都不懂就学呗 private void button1_Click(object sender, EventArgs e) { //string constr = "Data Sour ...
UGUI鼠标悬停事件
一开始我想用OnMouseOver方法,但是它只适用于GUI和非UI物体,对于UGUI无效. 方法1 在Update函数里用射线检测具体见博客:https://www.cnblogs.com/yan ...

[html+js][实现鼠标悬停事件]鼠标移动到行自动变色实现

[html+js][实现鼠标悬停事件]鼠标移动到行自动变色实现相关推荐

最新文章

热门文章