Question

我在HTML中使用CSS和JS编写了这个简单的代码...但是它没有运行。我是JS的初学者，我无法找出为什么我的mouseover（甚至尝试过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>

Answer 1

我在下面附加了工作代码，您需要将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>

Mouseenter，保留在epmty DIV中。更改颜色并将其删除

1 个答案: