javascript - 多个元素的鼠标悬停和鼠标移开

Question

使用 Javascript，我有多个元素，当我悬停该元素时，它会更改内容和元素。

我尝试使用 mouseover 和 mouseout，它适用于单个元素，但当我有多个元素时不起作用。

我为父级添加了循环，但仍然无法正常工作，现在当我将鼠标悬停在第一个元素上时，它只是循环。

我做错了什么？

const wrapper = document.querySelectorAll(".wrapper");

wrapper.forEach(function () {
    let mouseWhite = document.querySelector(".commercial-white");
    let mouseBlue = document.querySelector(".commercial-blue");

    mouseWhite.addEventListener("mouseover", function (e) {
        mouseBlue.classList.add("open");
        e.stopPropagation();
    })

    mouseBlue.addEventListener("mouseout", function (e) {
        mouseBlue.classList.remove("open");
        e.stopPropagation();
    })
})

  .wrapper {
        display: flex;
        position: relative;
    }

    .commercial-white {
        background-color: #f1f1f4;
        width: 240px;
        height: 260px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-bottom: 15px solid #005da0;
        margin: 10px;
    }

    .commercial-blue {
        position: absolute;
        background-color: #005da0;
        color: #FFFFFF;
        width: 240px;
        height: 273px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 10px;
        border: 2px solid #FFFFFF;
        visibility: hidden;
    }

    .open.commercial-blue {
        visibility: visible;
    }

    .commercial-flip {
        padding: 20px;
    }

<div class="wrapper">
        <div class="commercial-white">
            <div class="commercial-flip">
                <img style="width:100px" src="http://g-ec2.images-amazon.com/images/G/31/img14/anywhere/amazon-logo-500500._V327001990_.jpg">
                <h1>Your title</h1>
            </div>
        </div>

        <div class="commercial-blue">
            <div class="commercial-flip">
                <img style="width:100px" src="https://images-na.ssl-images-amazon.com/images/G/01/gc/designs/livepreview/amazon_dkblue_noto_email_v2016_us-main._CB468775337_.png">
                <h1>Lorem Ipsum</h1>
                <p>lorem ipsum dolor si amet lorem ipsum dolor si amet lorem ipsum dolor si amet</p>
            </div>
        </div>
    </div>

    <div class="wrapper">
        <div class="commercial-white">
            <div class="commercial-flip">
                <img style="width:100px" src="http://g-ec2.images-amazon.com/images/G/31/img14/anywhere/amazon-logo-500500._V327001990_.jpg">
                <h1>Your title</h1>
            </div>
        </div>

        <div class="commercial-blue">
            <div class="commercial-flip">
                <img style="width:100px" src="https://images-na.ssl-images-amazon.com/images/G/01/gc/designs/livepreview/amazon_dkblue_noto_email_v2016_us-main._CB468775337_.png">
                <h1>Lorem Ipsum</h1>
                <p>lorem ipsum dolor si amet lorem ipsum dolor si amet lorem ipsum dolor si amet</p>
            </div>
        </div>
    </div>

Answer 1

您需要在每个包装器上“querySelect”，而不是文档，因为在您的代码中 document.querySelector(".commercial-white") 只会给您 first occurence .commercial-white .. 它会执行两次，但它仍然是相同的事件... 文档中的第一个(两次)。

你的 querySelectorAll 给了你一个 NodeList元素 wrapper.
forEach将像数组一样遍历 NodeList 的每个元素(有点)。包装器[0] 包装器[1]...
参数 aWrapper 只是“NodeList 中正在处理的当前元素”的名称。
这样，aWrapper.querySelector 将仅在循环中的当前元素包装器内“选择”。

wrapper.forEach(function (aWrapper) {
    let mouseWhite = aWrapper.querySelector(".commercial-white");
    let mouseBlue = aWrapper.querySelector(".commercial-blue");

const wrapper = document.querySelectorAll(".wrapper");

wrapper.forEach(function(aWrapper) {

  let mouseWhite = aWrapper.querySelector(".commercial-white");
  let mouseBlue = aWrapper.querySelector(".commercial-blue");

  mouseWhite.addEventListener("mouseenter", function(e) {
    console.log("e.target.classList mouseWhite :", e.target.classList);
    mouseBlue.classList.toggle("open");
  })

  mouseBlue.addEventListener("mouseout", function(e) {
    console.log("e.target.classList mouseBlue :", e.target.classList);
    mouseBlue.classList.toggle("open");
  })
})

.wrapper {
  display: flex;
  position: relative;
}

.commercial-white {
  background-color: #f1f1f4;
  width: 240px;
  height: 260px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: 15px solid #005da0;
  margin: 10px;
}

.commercial-blue {
  position: absolute;
  background-color: #005da0;
  color: #FFFFFF;
  width: 240px;
  height: 273px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 10px;
  border: 2px solid #FFFFFF;
  visibility: hidden;
}

.open.commercial-blue {
  visibility: visible;
}

.commercial-flip {
  padding: 20px;
  pointer-events: none;
}

<div class="wrapper">
  <div class="commercial-white">
    <div class="commercial-flip">
      <img style="width:100px" src="http://g-ec2.images-amazon.com/images/G/31/img14/anywhere/amazon-logo-500500._V327001990_.jpg">
      <h1>Your title</h1>
    </div>
  </div>

  <div class="commercial-blue">
    <div class="commercial-flip">
      <img style="width:100px" src="https://images-na.ssl-images-amazon.com/images/G/01/gc/designs/livepreview/amazon_dkblue_noto_email_v2016_us-main._CB468775337_.png">
      <h1>Lorem Ipsum</h1>
      <p>lorem ipsum dolor si amet lorem ipsum dolor si amet lorem ipsum dolor si amet</p>
    </div>
  </div>
</div>

<div class="wrapper">
  <div class="commercial-white">
    <div class="commercial-flip">
      <img style="width:100px" src="http://g-ec2.images-amazon.com/images/G/31/img14/anywhere/amazon-logo-500500._V327001990_.jpg">
      <h1>Your title</h1>
    </div>
  </div>

  <div class="commercial-blue">
    <div class="commercial-flip">
      <img style="width:100px" src="https://images-na.ssl-images-amazon.com/images/G/01/gc/designs/livepreview/amazon_dkblue_noto_email_v2016_us-main._CB468775337_.png">
      <h1>Lorem Ipsum</h1>
      <p>lorem ipsum dolor si amet lorem ipsum dolor si amet lorem ipsum dolor si amet</p>
    </div>
  </div>
</div>

编辑:

对于错误显示，我刚刚添加了“pointer-events:无；”到 .commercial-flip 就足够了:

.commercial-flip {
  padding: 20px;
  pointer-events: none; }

我是 JS 的新手(所以我可能是错的)，但如果我理解正确，它会起作用，因为如果 .commercial-flip 可以接收指针事件，那么当它悬停时，它的父级是不是。
修改之前，只要不进入.commercial-flip的边框就可以了。
所以很明显，如果 child 能捕捉到事件，悬停一个 child 与悬停它的 parent 是不一样的，但如果它不能，那一切都很好。
编辑:Preventing Child from firing parent's click event

注意:我使用了 classList.toggle 而不是 classList.add 和 classList.remove，并且 mousenter 而不是 mouseover 但这只是个人喜好；它给出了完全相同的结果。