1、鼠标悬浮和离开事件.js
//当页面加载完成后执行后面的匿名函数 window.onload = function () {//get:获取 Element:元素 By:通过...方式//getElementById()根据id值获取某元素let fruitTbl = document.getElementById("fruit_tbl");//table.rows:获取这个表格的所有的行，返回数组let rows = fruitTbl.rows;//从 1 开始，因为 第 0 行是表头，不需要绑定事件for (let i = 1; i < rows.length; i++) {let tr = rows[i];//事件动态绑定tr.onmouseover = showBGColor;tr.onmouseout = clearBGColor;//cell:单元格、细胞//获取这一行的所有的单元格let tds = tr.cells;let priceTD = tds[2];priceTD.onmouseover = showHand;} }; function showHand() {let priceTD = event.srcElement;//cursor光标priceTD.style.cursor = "pointer"; } function showBGColor() {//window.event表示当前发生的事件 ”window.“可以省略// console.log(window.event);// alert(window.event);let obj = window.event.srcElement;//alert(obj);//console.log(obj); //发现obj是td，而不是tr。事件传递现象let td=obj;//parentElement:父元素 td的父元素是tr。tr有很多td子元素let tr = td.parentElement;tr.style.backgroundColor = "purple"; }function clearBGColor() {let td = window.event.srcElement;let tr = td.parentElement;tr.style.backgroundColor = "transparent"; }2、fruit.html
<!DOCTYPE html> <html lang="zh_CN"> <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>js-DOM/BOM实战</title><link href="style/fruit.css" rel="stylesheet"></link><script src="js/鼠标悬浮和离开事件.js"></script> </head> <body><div id="div0"><div id="div_title">欢迎使用水果库存系统</div><div id="div2"><table id="fruit_tbl"><tr><th class="w10"><input type="checkbox" /></th><th class="w20">名称</th><th class="w20">单价</th><th class="w20">数量</th><th class="w20">小计</th><th class="w10">操作</th></tr><!-- on:当...时候 mouse:鼠标 over:在...上--><!--当鼠标悬浮在这个tr上时,调用showBGColor()这个方法--><tr><td><input type="checkbox" /></td><td>苹果</td><td>5</td><td>2</td><td>10</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td><input type="checkbox" /></td><td>菠萝</td><td>3</td><td>5</td><td>15</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td><input type="checkbox" /></td><td>哈密瓜</td><td>4</td><td>5</td><td>20</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td><input type="checkbox" /></td><td>葡萄</td><td>10</td><td>5</td><td>50</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td><input type="checkbox" /></td><td>青梅</td><td>10</td><td>5</td><td>50</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td><input type="checkbox" /></td><td>人参果</td><td>10</td><td>5</td><td>50</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td><input type="checkbox" /></td><td>菠萝蜜</td></td><td>10</td><td>5</td><td>50</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td><input type="checkbox" /></td><td>西红柿</td><td>10</td><td>5</td><td>50</td><td><img src='imgs/del.png' class="delBtn"/></td></tr></table></div></div> </body> </html>3、fruit.css
*{color:rgb(3, 31, 2);font-weight: lighter; } body{padding:0;margin:0;background-color: rgb(3, 31, 2); } #div0{width:80%;border:0px solid red;background-color: rgb(209, 230, 235);margin-left:10%;padding-top:48px;padding-bottom:48px;margin-top:8px; } #div_title{width:80%;margin-left:10%;text-align: center;font-size:24px;letter-spacing: 4px;margin-bottom:16px; } #div2{margin-left:10%;border:0px solid red;width:80%; } .delBtn{width:16px;height:16px; } #fruit_tbl , #fruit_tbl td, #fruit_tbl th {border:1px solid lightgray;text-align: center; } #fruit_tbl{width:100%;line-height: 32px;border-collapse: collapse; } .w10{width:10%; } .w15{width:15%; } .w20{width:20%; }
在JS中实现鼠标悬浮变手势，可以使用鼠标事件和CSS样式来实现。
以下是一个实现鼠标悬浮变手势的JS代码示例：
// 获取要设置手势的元素 var element = document.getElementById("myElement");// 设置鼠标悬浮时的手势样式 element.addEventListener("mouseover", function() {element.style.cursor = "grab"; });// 设置鼠标移开时的手势样式 element.addEventListener("mouseout", function() {element.style.cursor = "default"; });上述代码中，我们首先获取要设置手势的元素，使用
addEventListener方法来监听鼠标事件。当鼠标悬浮在元素上时，我们将设置CSS样式来改变鼠标的手势样式为grab，当鼠标离开元素时，我们将改变鼠标的手势样式为default。您可以根据需要，将
grab或default替换为您所需要的手势样式，以实现您想要的效果。
要在JavaScript中实现鼠标悬浮变手势，您需要使用鼠标事件和CSS样式来实现。以下是一些基本的步骤：
选择要应用鼠标悬浮手势的元素。可以使用document.querySelector或document.querySelectorAll方法选择元素。
添加mouseover和mouseout事件监听器。当鼠标进入元素时，mouseover事件将被触发，当鼠标离开元素时，mouseout事件将被触发。
在事件监听器中添加代码，以更改元素的CSS样式，以表示鼠标悬浮手势。可以使用元素的style属性，或者添加/删除CSS类来更改样式。
使用CSS样式来定义鼠标悬浮手势。使用:hover伪类选择器，可以定义元素在鼠标悬浮时的样式。
下面是一个示例代码：
// 选择元素 const elem = document.querySelector('.my-element');// 添加事件监听器 elem.addEventListener('mouseover', () => {// 更改元素样式elem.style.cursor = 'pointer'; });elem.addEventListener('mouseout', () => {// 恢复元素样式elem.style.cursor = 'auto'; });在CSS中，您可以使用以下代码来定义鼠标悬浮手势：
.my-element:hover {/* 定义样式 */cursor: pointer; }这将在鼠标悬浮在元素上时将光标更改为指针。
