EXERCISE

1 实现如下图所示的页面效果，当鼠标移动到元素上时，样式发生改变，鼠标移出后，样式还原。

鼠标移动到元素上时，背景色改变。鼠标移出元素后，背景色还原。界面效果如图-1所示。

图– 1

图-1中选项二即为改变颜色后的效果。

参考答案

实现此案例可按照如下步骤进行。

步骤一：新建exec02.html文件

新建exec02.html文件，在该文件中创建如图-1所示的三个区域，代码如图-2所示。

图– 2

步骤二：引入jQuery.js文件

在exec02.html文件中引入jQuery.js文件，代码如图-3所示。

图– 3

步骤三：使鼠标移动到的区域加亮显示

添加jQuery代码，使鼠标移动到的区域加亮显示，代码如图-4所示。

图– 4

步骤四：运行查看效果

访问exec02.html页面，界面显示效果如图-5所示。

图– 5

本案例的完整代码如下。

exec02.html文件的完整代码如下所示：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
	ul{
		list-style-type:none;
	}
	ul li{
		float:left;
		width:150px;
		height:40px;
		background-color:#ff88ee;
		margin-left:10px;
		border:1px solid black;
		text-align:center;
	}
	
	.selected{
		background-color:yellow;
	}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>

<script type="text/javascript">
$(function(){
	$('ul li').mouseover(function(){
		$(this).addClass('selected').siblings().removeClass('selected');
	});
});
</script>

</head>
<body style="font-size:30px;">
	<ul>
		<li>选项一</li>
		<li>选项二</li>
		<li>选项三</li>
	</ul>
</body>
</html>