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

最新推荐文章于 2024-08-14 10:20:21 发布

卡布奇诺奶茶的独特

最新推荐文章于 2024-08-14 10:20:21 发布

阅读量1.2k

点赞数

分类专栏： Web小技能文章标签： web前端

本文链接：https://blog.youkuaiyun.com/qq_35119220/article/details/54908093

版权

Web小技能专栏收录该内容

12 篇文章

订阅专栏

本文讲述了提高用户体验的方法，重点讨论当鼠标划过div图层时如何改变背景色，鼠标离开后恢复原色。内容包括五种不同的实现方式，适合前端开发者参考学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述：

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

Web截图：

代码详情：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" 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文件来配合完成功能实现-->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" οnmοuseοver="this.style.backgroundColor='#F2F2F2'" οnmοuseοut="this.style.backgroundColor='#FFFFFF'"></div>
		<div id="first" οnmοuseοver="this.style.backgroundColor='#F2F2F2'" οnmοuseοut="this.style.backgroundColor='#FFFFFF'"></div>
		<div id="first" οnmοuseοver="this.style.backgroundColor='#F2F2F2'" οnmοuseοut="this.style.backgroundColor='#FFFFFF'"></div>
	</div>
	<br/><br/><br/><br/><br/><br/><br/>
	<!--Way002-->
	<!--DIV002-->
	<h3>方式二:</h3>
	<div id="container01">
		<div id="second" οnmοuseοver="this.className='t_over'" οnmοuseοut="this.className=''"></div>
		<div id="second" οnmοuseοver="this.className='t_over'" οnmοuseοut="this.className=''"></div>
		<div id="second" οnmοuseοver="this.className='t_over'" οnmοuseοut="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>

吐舌头 感谢您的倾心阅读