javascript - How to undo an addEventListener?

Question

I want to create an effect where if I hover over a certain element a paragraph element will be gradually displayed and vice versa (If the cursor is no longer hovering on the element the paragraph should gradually fade). I've already created the effect using pure CSS, but it was a bit cumbersome and it will only work if the paragraph is a direct child of the element I'm hovering on (which made it even more cumbersome). But here's how I created using 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>

Answer 1

Assign the event handler function to a variable, or give it a proper name. Then add and remove that.

Your removeEventListener call is failing because you're passing it a unique function.

Also, you actually don't want to undo the event listener to achieve the effect you want. Instead, listen to separate events: mouseover and mouseout. For example:

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>