Question

我想创建一种效果，如果我将鼠标悬停在某个元素上，则将逐步显示一个段落元素，反之亦然（如果光标不再悬停在该元素上，则该段落应逐渐消失）。我已经使用纯CSS创建了效果，但是它有点麻烦，并且只有在该段落是我要悬停的元素的直接子元素时，它才会起作用（这使它更加麻烦）。但是这是我使用CSS创建的方式：

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  overflow: hidden;
}

.FlexContainerRow {
  display: flex;
  flex-direction: row;
  justify-content: center;
  z-index: 1;
}

.FlixItem_Images {
  width: 50rem;
}

#CheiftianTwo {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

#welcome {
  position: absolute;
  z-index: 2;
  font-family: Calibri;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  transition: background-color color linear;
  transition-duration: 1s;
  color: transparent;
  background-color: transparent;
  margin-left: 13.75em;
  margin-top: 6.4em;
  padding: 0.2em;
  border-radius: 0.4em;
}

#divForLayers {
  position: absolute;
  z-index: 1;
}

#divForhover {
  height: 33.5em;
  width: 100rem;
  position: absolute;
  z-index: 3;
}

#divForhover:hover #welcome {
  transition: background-color color linear;
  color: white;
  background-color: black;
  transition-duration: 1s;
}

<header>
  <div id="divForhover">
    <div id="divForLayers">
      <div id="HeaderImagesContainer" class="FlexContainerRow">
        <div>
          <img src="https://www.nexusindustrialmemory.com/wp-content/uploads/2017/04/OriginalTank.jpg" class="FlixItem_Images" id="CheiftianOne" />
        </div>
        <div>
          <img src="https://www.nexusindustrialmemory.com/wp-content/uploads/2017/04/OriginalTank.jpg" class="FlixItem_Images" id="CheiftianTwo" />
        </div>
      </div>
    </div>
    <p id="welcome">Welcome to te Cheftian Mk.2 Main Battle Tank guide!</p>
  </div>
</header>
<nav></nav>
<footer></footer>

但是我刚刚了解到，您可以使用JavaScript进行相同的操作，这会简单得多：

addEventListner('mouseover', function(evt) {
  document.body.querySelector( /*ID_of_the_element*/ ).style.property = 'value';
})

问题是，我只知道当用户将鼠标悬停在元素上时如何显示段落，仅此而已。如果光标不再位于元素上，则该段落仍将显示。我不知道如何撤消 addEventListener。我尝试使用removeEventListener来执行此操作，但显然语法错误。请告诉我该怎么做。

以下是带有JavaScript的版本：

document.querySelector("#welcome").style.visibility = "hidden";

var imgOne = document.body.querySelector("#CheiftianOne");

imgOne.addEventListener('mouseover', function(evt) {
  var textBox = document.querySelector("#welcome");
  textBox.style.visibility = "visible";
});

imgOne.removeEventListener('mouseover', function(evt) {
  var textBox = document.querySelector("#welcome");
  textBox.style.visibility = "hidden";
});

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  overflow: hidden;
}

.FlexContainerRow {
  display: flex;
  flex-direction: row;
  justify-content: center;
  z-index: 1;
}

.FlixItem_Images {
  width: 50rem;
}

#CheiftianTwo {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

#welcome {
  position: absolute;
  z-index: 2;
  font-family: Calibri;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  transition: background-color color linear;
  transition-duration: 1s;
  color: white;
  background-color: black;
  margin-left: 13.75em;
  margin-top: 6.4em;
  padding: 0.2em;
  border-radius: 0.4em;
}

#divForLayers {
  position: absolute;
  z-index: 1;
}

<header>
  <div id="divForhover">
    <div id="divForLayers">
      <div id="HeaderImagesContainer" class="FlexContainerRow">
        <div>
          <img src="https://www.nexusindustrialmemory.com/wp-content/uploads/2017/04/OriginalTank.jpg" class="FlixItem_Images" id="CheiftianOne" />
        </div>
        <div>
          <img src="https://www.nexusindustrialmemory.com/wp-content/uploads/2017/04/OriginalTank.jpg" class="FlixItem_Images" id="CheiftianTwo" />
        </div>
      </div>
    </div>
    <p id="welcome">Welcome to te Cheftian Mk.2 Main Battle Tank guide!</p>
  </div>
</header>
<nav></nav>
<footer></footer>

Answer 1

将事件处理程序函数分配给变量，或为其指定适当的名称。然后添加并删除那个。

您的removeEventListener调用失败，因为您正在向其传递唯一函数。

此外，您实际上并不想 undo 取消事件监听器以实现所需的效果。相反，请监听单独的事件：mouseover和mouseout。例如：

var btn = document.getElementById('btn');
var par = document.getElementById('par');

btn.addEventListener('mouseover', function (e) {
  par.style.visibility = 'visible';
});

btn.addEventListener('mouseout', function (e) {
  par.style.visibility = 'hidden';
});

<button id="btn">Hover over me</button>

<p id="par" style="visibility: hidden;">This shows when hovering over the button</p>

当鼠标悬停在某个元素上时发生mouseover事件，相反，当鼠标离开该元素时发生mouseout事件。

Answer 2

调用removeEventListener时，必须将传递给addEventListener的 same 函数传递给它，而不是不同但等效的函数。这将永远不会删除侦听器：

imgOne.removeEventListener('mouseover', function (evt) { /* ... */ });

...由于定义，该功能以前从未添加过。

记住您在添加时使用的那个，并在删除时使用相同的那个。

分别：添加处理程序，然后立即删除它没有多大意义。在代码中对addEventListener和removeEventListener的调用之间不会触发处理程序。（编辑：啊，rossipedia知道了为什么要这么做，his answer告诉您要这么做。）

Answer 3

谢谢大家。我想出了没有removeEventListener的方法。（我使用了两个addEventListener）。

再次感谢！

如何撤消addEventListener？

3 个答案: