胖虎的工具箱-编程导航 胖虎的工具箱-编程导航

JS代码实现：鼠标悬停与离开（两种方式）

2年前 (2022) 程序员胖胖胖虎阿
292 0 0

第一种：普通方式

【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";

	}
}

版权声明：程序员胖胖胖虎阿 发表于 2022年9月13日 下午9:16。
转载请注明：JS代码实现：鼠标悬停与离开（两种方式） | 胖虎的工具箱-编程导航

相关文章

IntelliJ IDEA最新永久永久激活码(IDEA2020破解版每日更新)
程序员胖胖胖虎阿
127
IDEA2021注册码(IntelliJ IDEA永久 破解教程,全年更新)
程序员胖胖胖虎阿
208
Mybatis框架(5)---动态sql
程序员胖胖胖虎阿
393
ElasticSearch 搜索入门
程序员胖胖胖虎阿
112
CYQ.Data V4.5.5 版本发布[顺带开源Emit编写的快速反射转实体类FastToT类]
程序员胖胖胖虎阿
298
观察易通过信通院首批可观测性“先进级”能力评估
程序员胖胖胖虎阿
204

暂无评论

暂无评论...
致力于称为最好的程序员导航网站

友链申请 免责声明 关于我们

Copyright © 2022  胖虎的工具箱-编程导航   陇ICP备2022001249号