我正在上有关DOM事件操作的课程。我正在尝试制作一个待办事项清单，当我将鼠标悬停在上面时，李的颜色会发生变化。我的问题是，单击元素时颜色会发生变化，而将鼠标悬停在元素上时颜色不会变化。预先谢谢你。
我有以下js：
var lis = document.querySelectorAll("li");
for(var i = 0; i < lis.length; i++){
lis[i].addEventListener("mouseover", function(){
this.classList.add("selected");
});
lis[i].addEventListener("mouseout", function(){
this.classList.remove("selected");
});
lis[i].addEventListener("click", function(){
this.classList.toggle("done");
})
}.done {
text-decoration: line-through;
opacity: 0.5;
}
.selected {
color: green;
}<!DOCTYPE html>
<html>
<head>
<title>Todo List Demo</title>
<link rel="stylesheet" type="text/css" href="todos.css">
</head>
<body>
<ul>
<li>Wash cat</li>
<li>Feed Cat</li>
<li>Feed cat to dog</li>
</ul>
<script type="text/javascript" src="todos.js"></script>
</body>
</html>HTML部分：