Мышиный центр, мышеловка в эпмты DIV.Измени цвет и убери его - PullRequest
Новая
       43

Мышиный центр, мышеловка в эпмты DIV.Измени цвет и убери его

0 голосов
/ 29 сентября 2018

У меня есть этот простой код в HTML с CSS и JS ... Но он не работает.Я новичок в JS, и я не могу выяснить, почему мой курсор мыши (я даже пробовал mouseenter) не работает.Может кто-нибудь объяснить это мне?Также мне нужно сделать отпуск мышью, чтобы, когда пользователь покинул поле, красный цвет исчез.Я знаю, ребята, это очень просто, но я не могу решить это: (

Спасибо 

div {
  width: 300px;
  height: 300px;
  border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

</head>

<body>
  <div></div>

  <script>
    var box = document.querySelector('div')[0];
    if (box) {
      box.addEventListener('mouseover', colorin);
    }

    function colorin(e) {
      e.style.backgroundColor = "red";
    }
  </script>
</body>

</html>

1 Ответ

0 голосов
/ 29 сентября 2018

Я прикрепил рабочий код ниже, вам нужно изменить e.style.backgroundColor = "red"; на e.target.style.backgroundColor = "red"; Без .target нет элемента DOM для изменения.Кроме того, как вы упомянули, вам нужно иметь событие mouseout, которое возвращает цвет обратно в белый, когда пользователь больше не фокусируется на этом div. 

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>

        div {
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
        </style>
    </head>
    <body>
        <div></div>

        <script>
            var box = document.querySelector('div');
            if(box) {
                box.addEventListener('mouseenter', colorin);
                box.addEventListener('mouseout', colorout);

            }

            function colorin(e) {
                e.target.style.backgroundColor = "red";
            }

            function colorout(e) {
                e.target.style.backgroundColor = "white";
            }
        </script>
    </body>
    </html>
...