河北省住房建设厅网站,二级目录 Wordpress,建设营销型网站的步骤,泸州大浪科技做网站1、鼠标悬浮和离开事件.js //当页面加载完成后执行后面的匿名函数
window.onload function () {//get:获取 Element:元素 By:通过...方式//getElementById()根据id值获取某元素let fruitTbl document.getElementById(fruit_tbl);//table.rows:获取这个表格… 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 tdobj;//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 langzh_CN
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlejs-DOM/BOM实战/titlelink hrefstyle/fruit.css relstylesheet/linkscript srcjs/鼠标悬浮和离开事件.js/script
/head
bodydiv iddiv0div iddiv_title欢迎使用水果库存系统/divdiv iddiv2table idfruit_tbltrth classw10input typecheckbox //thth classw20名称/thth classw20单价/thth classw20数量/thth classw20小计/thth classw10操作/th/tr!-- on:当...时候 mouse:鼠标 over:在...上--!--当鼠标悬浮在这个tr上时,调用showBGColor()这个方法--trtdinput typecheckbox //tdtd苹果/tdtd5/tdtd2/tdtd10/tdtdimg srcimgs/del.png classdelBtn//td/trtrtdinput typecheckbox //tdtd菠萝/tdtd3/tdtd5/tdtd15/tdtdimg srcimgs/del.png classdelBtn//td/trtrtdinput typecheckbox //tdtd哈密瓜/tdtd4/tdtd5/tdtd20/tdtdimg srcimgs/del.png classdelBtn//td/trtrtdinput typecheckbox //tdtd葡萄/tdtd10/tdtd5/tdtd50/tdtdimg srcimgs/del.png classdelBtn//td/trtrtdinput typecheckbox //tdtd青梅/tdtd10/tdtd5/tdtd50/tdtdimg srcimgs/del.png classdelBtn//td/trtrtdinput typecheckbox //tdtd人参果/tdtd10/tdtd5/tdtd50/tdtdimg srcimgs/del.png classdelBtn//td/trtrtdinput typecheckbox //tdtd菠萝蜜/td/tdtd10/tdtd5/tdtd50/tdtdimg srcimgs/del.png classdelBtn//td/trtrtdinput typecheckbox //tdtd西红柿/tdtd10/tdtd5/tdtd50/tdtdimg srcimgs/del.png classdelBtn//td/tr/table/div/div
/body
/html3、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;
}这将在鼠标悬浮在元素上时将光标更改为指针。
