《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>
感謝您的傾心閱讀