JS代码实现：鼠标悬停与离开（两种方式）
用JS代码实现两种方式的鼠标悬停与离开
·
第一种：普通方式
【demo07.html】
<html>
<head>
<link rel="stylesheet" href="css/demo05.css">
<script type="text/javascript" src="js/demo07.js">
</script>
</head>
<body>
<div id="div_container">
<div id="div_fruit_list">
<table id="tb1_fruit">
<tr>
<th class="w20">名称</th>
<th class="w20">单价</th>
<th class="w20">数量</th>
<th class="w20">小计</th>
<th>操作</th>
</tr>
<tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
<td>苹果</td>
<td onmouseover="showHand()">5</td>
<td>20</td>
<td>100</td>
<td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td>
</tr>
<tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
<td>西瓜</td>
<td onmouseover="showHand()">3</td>
<td>20</td>
<td>60</td>
<td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td>
</tr>
<tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
<td>菠萝</td>
<td onmouseover="showHand()">4</td>
<td>25</td>
<td>100</td>
<td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td>
</tr>
<tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
<td>榴莲</td>
<td onmouseover="showHand()">3</td>
<td>30</td>
<td>90</td>
<td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td>
</tr>
<tr>
<td>总计</td>
<td colspan="4">999</td>
</tr>
</table>
</div>
</div>
</body>
</html>
【demo05.css】
body{
margin:0;
padding:0;
background-color:#808080;
}
div{
position:relative;
float:left;
}
#div_container{
width:80%;
height:100%;
border:0px solid blue;
margin-left:10%;
float:left;
background-color:honeydew;
/*设置边框轮廓为圆角*/
border-radius:25px;
}
#div_fruit_list{
width:100%;
border:0px solid red;
}
#tbl_fruit{
/*设置表格宽度：页面宽度的60%*/
width:60%;
/*设置每行单元格高度*/
line-height:28px;
/*设置表格和页面边框上方的距离*/
margin-top:120px;
/*设置表格和页面边框左边的距离*/
margin-left:20%;
}
#tbl_fruit, #tbl_fruit tr,#tbl_fruit th,#tbl_fruit td{
border:1px solid gray;
/*单元格边界合并*/
border-collapse:collapse;
/*单元格文字居中*/
text-align:center;
/*设置单元格文字样式*/
font-size:16px;
font-family:"楷体";
font-weight:lighter;
color:threeddarkshadow;
}
.w20{
width:20%;
}
.deleteImg{
width:24px;
height:24px;
}
【demo07.js】
//当鼠标悬浮时，显示背景颜色
function showBGColor(){
//event:当前发生的事件
//event.srcElement:事件源
//alert(event.srcElement);
//显示事件源的标签名：tr, td, th
//alert(event.srcElement.tagName); //显示TD
if(event && event.srcElement && event.srcElement.tagName == "TD") {
//1、取选中的单元格
var td = event.srcElement;
//td.parentElement表示获取td的父元素 TR
//2、取选中的单元格所在的单元行，并对此单元行进行操作
var tr = td.parentElement;
//如果想要通过js代码设置某节点的样式，则需要加上.style
//3、设置了选中行的背景颜色
tr.style.backgroundColor = "pink";
//tr.cells表示获取这个tr中的所有的单元格
var tds = tr.cells;
//4、设置选中这行的单元格里的文字颜色
for(var i = 0; i < tds.length; i++) {
tds[i].style.color = "white";
}
}
}
//当鼠标离开时，恢复原始样式
function clearBGColor(){
if(event && event.srcElement && event.srcElement.tagName == "TD"){
var td = event.srcElement;
var tr = td.parentElement;
tr.style.backgroundColor = "transparent";
var tds = tr.cells;
for(var i = 0; i < tds.length; i++) {
tds[i].style.color = "threeddarkshadow";
}
}
}
//当鼠标悬浮在单价单元格时，显示手势
function showHand(){
if(event && event.srcElement && event.srcElement.tagName == "TD"){
//取选中的单元格
var td = event.srcElement;
//设置选中的单元格，光标显示手的样式
//cursor:光标
td.style.cursor = "hand";
}
}
第二种：优化方式（使用window.onload）
【demo08.html】
<html>
<head>
<link rel="stylesheet" href="css/demo05.css">
<script type="text/javascript" src="js/demo08.js">
</script>
</head>
<body>
<div id="div_container">
<div id="div_fruit_list">
<table id="tbl_fruit">
<tr>
<th class="w20">名称</th>
<th class="w20">单价</th>
<th class="w20">数量</th>
<th class="w20">小计</th>
<th>操作</th>
</tr>
<tr>
<td>苹果</td>
<td>5</td>
<td>20</td>
<td>100</td>
<td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td>
</tr>
<tr>
<td>西瓜</td>
<td>3</td>
<td>20</td>
<td>60</td>
<td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td>
</tr>
<tr>
<td>菠萝</td>
<td>4</td>
<td>25</td>
<td>100</td>
<td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td>
</tr>
<tr>
<td>榴莲</td>
<td>3</td>
<td>30</td>
<td>90</td>
<td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td>
</tr>
<tr>
<td>总计</td>
<td colspan="4">999</td>
</tr>
</table>
</div>
</div>
</body>
</html>
【demo08.js】
window.onload=function(){
//当页面加载完成，我们需要绑定各种事件
//根据id获取到表格
var fruitTbl = document.getElementById("tbl_fruit");
//获取表格中所有行(tr)
var rows = fruitTbl.rows;
for(var i = 1; i < rows.length - 1; i++) {
var tr = rows[i];
//1.绑定鼠标悬浮及离开时设置背景颜色
tr.onmouseover = showBGColor;//注意：没有();若有(),则代表当场调用这个方法，并且将这个方法的返回值返回给变量
tr.onmouseout = clearBGColor;
//获取tr这一行所有的单元格
var cells = tr.cells;
//获取单价单元格
var priceTD = cells[1];
//2.绑定鼠标悬浮在单价单元格变手势的事件
priceTD.onmouseover = showHand;
}
}
//当鼠标悬浮时，显示背景颜色
function showBGColor(){
//event:当前发生的事件
//event.srcElement:事件源
//alert(event.srcElement);
//显示事件源的标签名：tr, td, th
//alert(event.srcElement.tagName); //显示TD
if(event && event.srcElement && event.srcElement.tagName == "TD") {
//1、取选中的单元格
var td = event.srcElement;
//td.parentElement表示获取td的父元素 TR
//2、取选中的单元格所在的单元行，并对此单元行进行操作
var tr = td.parentElement;
//如果想要通过js代码设置某节点的样式，则需要加上.style
//3、设置了选中行的背景颜色
tr.style.backgroundColor = "pink";
//tr.cells表示获取这个tr中的所有的单元格
var tds = tr.cells;
//4、设置选中这行的单元格里的文字颜色
for(var i = 0; i < tds.length; i++) {
tds[i].style.color = "white";
}
}
}
//当鼠标离开时，恢复原始样式
function clearBGColor(){
if(event && event.srcElement && event.srcElement.tagName == "TD"){
var td = event.srcElement;
var tr = td.parentElement;
tr.style.backgroundColor = "transparent";
var tds = tr.cells;
for(var i = 0; i < tds.length; i++) {
tds[i].style.color = "threeddarkshadow";
}
}
}
//当鼠标悬浮在单价单元格时，显示手势
function showHand(){
if(event && event.srcElement && event.srcElement.tagName == "TD"){
//取选中的单元格
var td = event.srcElement;
//设置选中的单元格，光标显示手的样式
//cursor:光标
td.style.cursor = "hand";
}
}
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
5
0- 0
已为社区贡献6条内容
所有评论(0)