Как мне навести курсор мыши - PullRequest
Новая
       0

Как мне навести курсор мыши

0 голосов
/ 02 марта 2020

Я делаю курс по манипулированию 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>

1 Ответ

0 голосов
/ 04 марта 2020

Html часть: 

<ul>
   <li onmouseenter="enter(0)" onmouseout="out(0)">Milk</li>
   <li onmouseenter="enter(1)" onmouseout="out(1)">Eggs</li>
   <li onmouseenter="enter(2)" onmouseout="out(2)">Fruits</li>
</ul>

Js: 

function enter(x) {
    document.getElementsByTagName('li')[x].style.color = "red"
}
function out(y) {
    document.getElementsByTagName('li')[y].style.color = "black"
}

Кстати, я только что проверил код, и он работал! :)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...