Question

我为一些<div>元素创建了一个EventListener，现在我想要更改此特定元素的子元素的不透明度，如果EventListener在此特定元素上为true则更改。我如何用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来引用当前元素。因为处理程序只会在鼠标悬停事件期间做出反应，所以您不需要检查它，因为它始终是真的。

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;
}

Answer 2

当事件被触发时，您可以访问事件参数。它作为n属性起作用。

事件的一个属性是target - fire_ event的元素。

return header + "," + author ...

尝试使用console.dir（e.target）进行研究。

Answer 3

我只是建议： 1.为所有想要让孩子改变不透明度的div分配课程让我们说myClass

$('.myClass').children().on('mouseenter', function(){
  $(this).css('opacity', '0.8');
 });

多个对象上的javascript eventlistener

3 个答案: