我试图解决这个问题：每当我将鼠标光标输入父 div 时，该 div 的背景颜色将随机变化

Question

首先我以为我解决了这个问题，因为每次我在 div 中输入光标时，背景颜色都会随机变化。但问题是只要我将光标保持在 div 内并在子元素上移动，背景颜色就会不断随机变化。我将如何解决它？

<div class="card-border" id="triangleColorChange">
  <img src="images/triangle.png" alt="...">
  <div>
    <h5>Triangle</h5>
    <h6>Area(A)= .5 x b x h </h6>
    <input type="text" placeholder="b" id="triangleB"><span> cm</span>
    <input type="text" placeholder="h" id="triangleH"><span> cm</span>
    <br><br>
    <button id="trianglrBtn">Calculate</button>
  </div>
</div>

<script>
  function getRandomColor() {
    const letters = '0123456789abcdefABCDEF';

    let color = '#';

    for (let i = 0; i < 6; i++) {
      color = color + letters[Math.floor(Math.random() * 22)];

    }
    return color;
  }
  
  document.getElementById('triangleColorChange').addEventListener('mouseover', function() {
    const triangleArea = document.getElementById('triangleColorChange');
    triangleArea.style.backgroundColor = getRandomColor();

  })
  
  document.getElementById('triangleColorChange').addEventListener('mouseleave', function() {
    const triangleArea = document.getElementById('triangleColorChange');
    triangleArea.style.backgroundColor = 'white';
  })
</script>

Answer 1

一种方法是添加一个变量“mouseOn”，它会记住你是否在 div 上。这是代码：

  let mouseOn = false;
  function getRandomColor() {
    const letters = "0123456789abcdefABCDEF";

    let color = "#";

    for (let i = 0; i < 6; i++) {
      color = color + letters[Math.floor(Math.random() * 22)];
    }
    return color;
  }
  document
    .getElementById("triangleColorChange")
    .addEventListener("mouseover", function () {
      if (!mouseOn) {
        mouseOn = true;
        const triangleArea = document.getElementById("triangleColorChange");
        triangleArea.style.backgroundColor = getRandomColor();
      }
    });
  document
    .getElementById("triangleColorChange")
    .addEventListener("mouseleave", function () {
      mouseOn = false;
      const triangleArea = document.getElementById("triangleColorChange");
      triangleArea.style.backgroundColor = "white";
    });

<div class="card-border" id="triangleColorChange">
  <img src="images/triangle.png" alt="..." />
  <div>
    <h5>Triangle</h5>
    <h6>Area(A)= .5 x b x h</h6>
    <input type="text" placeholder="b" id="triangleB" /><span> cm</span>
    <input type="text" placeholder="h" id="triangleH" /><span> cm</span>
    <br /><br />
    <button id="trianglrBtn">Calculate</button>
  </div>
</div>

Answer 2

鼠标输入而不是鼠标悬停

<div class="card-border" id="triangleColorChange">
  <img src="images/triangle.png" alt="...">
  <div>
    <h5>Triangle</h5>
    <h6>Area(A)= .5 x b x h </h6>
    <input type="text" placeholder="b" id="triangleB"><span> cm</span>
    <input type="text" placeholder="h" id="triangleH"><span> cm</span>
    <br><br>
    <button id="trianglrBtn">Calculate</button>
  </div>
</div>

<script>
  function getRandomColor() {
    const letters = '0123456789abcdefABCDEF';

    let color = '#';

    for (let i = 0; i < 6; i++) {
      color = color + letters[Math.floor(Math.random() * 22)];

    }
    return color;
  }
  
  document.getElementById('triangleColorChange').addEventListener('mouseenter', function() {
    const triangleArea = document.getElementById('triangleColorChange');
    triangleArea.style.backgroundColor = getRandomColor();

  })
  
  document.getElementById('triangleColorChange').addEventListener('mouseleave', function() {
    const triangleArea = document.getElementById('triangleColorChange');
    triangleArea.style.backgroundColor = 'white';
  })
</script>