《div图层被鼠标划过时其背景色变色的五种方式》

2024-04-27 15:10:25

字体：大中小

来源：转载

供稿：网友

概述：

同样是为了提高用户体验程度，本篇内容将叙述：div图层被鼠标划过时其背景色改变，鼠标离开相关div图层时其颜色变为原来的颜色。实现上述效果下面总结了五种实现方式，请您耐心阅读，或许会有点收获。

Web截图：

代码详情：

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="KeyWords" content="">  <meta name="Description" content="">  <title>div图层被鼠标划过时其背景色变色的五种方式</title> </head>		<style type="text/CSS">		/*Way001*/		/*DIV001[css]*/			#first{				border:1px #CCCCCC solid;				width:100px;				height:100px;				margin:10px;				float:left;		}		/*Way002*/		/*DIV002[css]*/			#second{				border:1px #CCCCCC solid;				width:100px;				height:100px;				margin:10px;				float:left;		}		/*在此自定义构造一个类名为“t_over”的元素并赋予属性和属性值，来配合完成Way002的操作*/		.t_over{				background-color:#F2F2F2;				}		/*Way003*/		/*DIV003[css]*/			#third{				border:1px #CCCCCC solid;				width:100px;				height:100px;				margin:10px;				float:left;		}		/*利用标记标签辅助激活伪类元素：hover*/		div#third:hover{				background-color:#F2F2F2;				}					/*Way004*/		/*DIV004[css]*/			#fourth{				border:1px #CCCCCC solid;				width:100px;				height:100px;				margin:10px;				float:left;		}		#fourth01{				border:1px #CCCCCC solid;				width:100px;				height:100px;				margin:10px;				float:left;		}		#fourth02{				border:1px #CCCCCC solid;				width:100px;				height:100px;				margin:10px;				float:left;		}		/*Way005*/		/*DIV005[css]*/			#fifth{				border:1px #CCCCCC solid;				width:100px;				height:100px;				margin:10px;				float:left;		}	</style>	<!--Way004-->	<!--Div004-->	<!--在此引入JQuery文件来配合完成功能实现-->	<script type="text/javascript" language="Javascript" src="file:///F|/20160425好多工具/jquery/jquery-1.11.3.min.js"></script>	<script type="text/javascript" language="javascript">			$(document).ready(function(){			/*ID名为“fourth”的div图层，当鼠标经过时，其颜色变为#F2F2F2色*/			$("#fourth").bind('mouSEOver',function(){				$(this).css({"backgroundColor":"#F2F2F2"});			});			/*ID名为“fourth”的div图层，当鼠标离开时，其颜色变为#FFFFFF色*/			$("#fourth").bind('mouseout',function(){				$(this).css({"background-color":"#FFFFFF"});			});			/*ID名为“fourth01”的div图层，当鼠标经过时，其颜色变为#F2F2F2色*/			$("#fourth01").bind('mouseover',function(){				$(this).css({"backgroundColor":"#F2F2F2"});			});			/*ID名为“fourth01”的div图层，当鼠标经过时，其颜色变为#FFFFFF色*/			$("#fourth01").bind('mouseout',function(){				$(this).css({"backgroundColor":"#FFFFFF"});			});			/*ID名为“fourth02”的div图层，当鼠标经过时，其颜色变为#F2F2F2色*/			$("#fourth02").bind('mouseover',function(){				$(this).css({"backgroundColor":"#F2F2F2"});			});			/*ID名为“fourth02”的div图层，当鼠标经过时，其颜色变为#FFFFFF色*/			$("#fourth02").bind('mouseout',function(){				$(this).css({"backgroundColor":"#FFFFFF"});			});		});		</script>	<!--Way005-->	<!--DIV005[js]-->	<script type="text/javascript" language="javascript">			//创建一个匿名函数入口		window.onload = function(){			//声明指定特定div图层ID为“container05”中的所有标签为div的元素			var divs = document.getElementById("container05").getElementsByTagName("div");			//声明len表示divs的长度			var len = divs.length;									for(var i=0;i<len;i++){				//当div图层被鼠标经过时，其背景色变为#F2F2F2色[浅灰色]				divs[i].onmouseover = function(){					for(var j=0;j<len;j++){						//当div图层被鼠标经过时，其背景色变为#FFFFFF[白色]						divs[j].style.backgroundColor = "#FFFFFF";					}					this.style.backgroundColor = "#F2F2F2";				}			}		}		</script> <body>  	<!--Way001-->	<!--DIV001-->	<h3>方式一:</h3>	<div id="container">		<div id="first" onmouseover="this.style.backgroundColor='#F2F2F2'" onmouseout="this.style.backgroundColor='#FFFFFF'"></div>		<div id="first" onmouseover="this.style.backgroundColor='#F2F2F2'" onmouseout="this.style.backgroundColor='#FFFFFF'"></div>		<div id="first" onmouseover="this.style.backgroundColor='#F2F2F2'" onmouseout="this.style.backgroundColor='#FFFFFF'"></div>	</div>	<br/><br/><br/><br/><br/><br/><br/>	<!--Way002-->	<!--DIV002-->	<h3>方式二:</h3>	<div id="container01">		<div id="second" onmouseover="this.className='t_over'" onmouseout="this.className=''"></div>		<div id="second" onmouseover="this.className='t_over'" onmouseout="this.className=''"></div>		<div id="second" onmouseover="this.className='t_over'" onmouseout="this.className=''"></div>	</div>	<br/><br/><br/><br/><br/><br/><br/>	<!--Way003-->	<!--DIV003-->	<h3>方式三:</h3>	<div id="container03">		<div id="third"></div>		<div id="third"></div>		<div id="third"></div>	</div>		<br/><br/><br/><br/><br/><br/><br/>	<!--Way004-->	<!--DIV004-->	<h3>方式四:</h3>	<div id="container04">		<div id="fourth"></div>		<div id="fourth01"></div>		<div id="fourth02"></div>	</div>	<br/><br/><br/><br/><br/><br/><br/>	<!--Way005-->	<!--DIV005-->	<h3>方式五:</h3>	<div id="container05">		<div id="fifth"></div>		<div id="fifth"></div>		<div id="fifth"></div>	</div> </body></html>
感谢您的倾心阅读