问题描述：请使用jQuery相关知识实现当鼠标进入，移开爱心变色，当点击爱心，则该爱心往前的所有爱心都变颜色。
关键代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
li {
float: left;
width: 40px;
height: 50px;
margin: 10px;
}
li img {
width: 40px;
height: 50px;
}
</style>
<body>
<ul>
<li><img src="../kongxin.jpg" alt=""></li>
<li><img src="../kongxin.jpg" alt=""></li>
<li><img src="../kongxin.jpg" alt=""></li>
<li><img src="../kongxin.jpg" alt=""></li>
<li><img src="../kongxin.jpg" alt=""></li>
</ul>
<script src="./jquery.min.js"></script>
<script>
var shixin = "../shixin.jpg";
var kongxin = "../kongxin.jpg";
$('ul li').on('mouseenter', function () {
$(this).children('img').attr('src', shixin);
$(this).prevAll('li').children('img').attr('src', shixin);
}).on('click', function () {
$('ul li.on').removeClass('on');
$(this).attr('class', 'on');
}).on('mouseleave', function () {
$('ul li').children('img').attr('src', kongxin);
$('ul li.on').children('img').attr('src', shixin);
$('ul li.on').prevAll('li').children('img').attr('src', shixin);
})
</body>
</html>运行效果：
