用jquery完成此功能，要求鼠标经过星星点亮并且文字发生变化，求助大神文字变化怎么改变？

最新推荐文章于 2024-08-14 02:14:47 发布

weixin_45090721

最新推荐文章于 2024-08-14 02:14:47 发布

阅读量1.2k

点赞数

分类专栏：问题文章标签： jquery html

本文链接：https://blog.csdn.net/weixin_45090721/article/details/107371463

版权

问题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html>
<head>
	<title>星星评分</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
<!--引入jquery-->
	<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="box clear">
	<div class="list">
		<i class="star1"></i>
		<i class="star"></i>
	</div>
	<div class="list">
		<i class="star1"></i>
		<i class="star"></i>
	</div>
	<div class="list">
		<i class="star1"></i>
		<i class="star"></i>
	</div>
	<div class="list">
		<i class="star1"></i>
		<i class="star"></i>
	</div>
	<div class="list">
		<i class="star1"></i>
		<i class="star"></i>
	</div>
	<div class="txt">非常好</div>
</div>
<script src="js/index.js"></script>
</body>
</html>

2.style.css

body{
	margin: 0;
	padding:0;
}
.clear:after{
	content:"";
	display: block;
	clear:both;
}
.box{
	margin:30px; 
}
.box .list{
	float:left;
	position: relative;
	margin:0 5px;
	width: 44px;
	height: 42px;
}
.box .list .star1{
	position: absolute;
	left:0;
	top:0;
	width: 44px;
	height: 42px;
	background: url("../img/star1.png") no-repeat center;
	z-index: 0;
}
.box .list .star{
	position: absolute;
	left:0;
	top:0;
	width: 44px;
	height: 42px;
	background: url("../img/star.png") no-repeat center;
}
.box .txt{
	float:left;
	width: 100px;
	margin-left:20px;
	line-height: 42px;
}

3.index.js

$(function(){
//定义一个arr数组，值为："非常差",'差',"一般","满意","非常满意"
	var arr=["非常差",'差',"一般","满意","非常满意"];
//鼠标经过li
	$(".list").hover(function(){
		$(this).children().find(".star1").css("background-position","left bottom");
		$(this).find(".star1").css("z-index",1);
		$(this).children().find(".star1").css("background-position","left top");
		$(".txt").text(arr);
	})
})