多个对象上的javascript eventlistener

Question

我为一些 <div> 创建了一个 EventListener元素，现在我想更改此特定元素的子元素的不透明度，以更改此特定元素上的 EventListener 是否为真。我如何用 jQuery 或 Javascript 编写它？我已经写了伪引语，我认为它应该有效。我在将它翻译成 js 时遇到问题。

var overLay = document.getElementsByClassName("overlay");

for (i = 0; i < overLay.length; i++) {
  overLay[i].addEventListener("mouseover", mouseOver);
  overLay[i].addEventListener("mouseout", mouseOut);
}

function mouseOver() {
  document.getElementById("project_07").style.maxWidth = "20px"; //just for testing works!
  /* PSEUDOCODE
  if overlay[i] (mouseover === true) {
    getChildElement of (this/ overlay[i]) // is an <img> element
    and .style.opacity = ".8";
  */
}

function mouseOut() {
  document.getElementById("project_07").style.maxWidth = "100%";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

有了事件监听器，您可以使用this 来引用当前元素。因为处理程序只会在鼠标悬停事件期间使用react，所以您不需要检查它，因为它始终为真。

function mouseOver() {
  this.querySelector("img").style.opacity = 0.8;
}

然后，如果您想清除 mouseout 上的样式更改，只需将相同的代码添加到您的 mouseOut 函数即可。

function mouseOut() {
  this.querySelector("img").style.opacity = 1;
}

另外，如果你只是修改子元素的样式，你可以只用 css 来解决这个问题。

.overlay:hover img {
  opacity: .8;
}