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

#wele {
  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 #wele {
  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=".jpg" class="FlixItem_Images" id="CheiftianOne" />
        </div>
        <div>
          <img src=".jpg" class="FlixItem_Images" id="CheiftianTwo" />
        </div>
      </div>
    </div>
    <p id="wele">Wele to te Cheftian Mk.2 Main Battle Tank guide!</p>
  </div>
</header>
<nav></nav>
<footer></footer>

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

#wele {
  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 #wele {
  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./wp-content/uploads/2017/04/OriginalTank.jpg" class="FlixItem_Images" id="CheiftianOne" />
        </div>
        <div>
          <img src="https://www.nexusindustrialmemory./wp-content/uploads/2017/04/OriginalTank.jpg" class="FlixItem_Images" id="CheiftianTwo" />
        </div>
      </div>
    </div>
    <p id="wele">Wele to te Cheftian Mk.2 Main Battle Tank guide!</p>
  </div>
</header>
<nav></nav>
<footer></footer>

But I've just learned that you can do the same thing with JavaScript and it will be much much simpler:

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

The problem is that I only know how to to display the paragraph when the user hovers on the element, and that's it. If the cursor is no longer on the element, the paragraph will still be displayed. I don't know how to undo the addEventListener. I tried to do it with removeEventListener, but apparently I have the syntax wrong. Please tell me how to do it.

Here's the version with the JavaScript:

document.querySelector("#wele").style.visibility = "hidden";

var imgOne = document.body.querySelector("#CheiftianOne");

imgOne.addEventListener('mouseover', function(evt) {
  var textBox = document.querySelector("#wele");
  textBox.style.visibility = "visible";
});

imgOne.removeEventListener('mouseover', function(evt) {
  var textBox = document.querySelector("#wele");
  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);
}

#wele {
  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./wp-content/uploads/2017/04/OriginalTank.jpg" class="FlixItem_Images" id="CheiftianOne" />
        </div>
        <div>
          <img src="https://www.nexusindustrialmemory./wp-content/uploads/2017/04/OriginalTank.jpg" class="FlixItem_Images" id="CheiftianTwo" />
        </div>
      </div>
    </div>
    <p id="wele">Wele to te Cheftian Mk.2 Main Battle Tank guide!</p>
  </div>
</header>
<nav></nav>
<footer></footer>

• javascript
• dom

Share Improve this question Follow edited Jun 23, 2018 at 16:37 UkFLSUI 5,68066 gold badges3737 silver badges4949 bronze badges asked Jun 23, 2018 at 16:28 user9968084user9968084 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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>

The mouseover event occurs when the mouse hovers over an element, and conversely the mouseout event occurs when the mouse leaves the element.

When you call removeEventListener, you have to pass it the same function you passed addEventListener, not a different-but-equivalent one. This will never remove a listener:

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

...because by definition, that exact function wasn't ever added previously.

Remember the one you used when adding, and use that same one when removing.

Separately: Adding the handler and then immediately removing it doesn't make a lot of sense. Nothing can happen that will trigger the handler between the calls to addEventListener and removeEventListener in your code. (Edit: Ah, rossipedia has picked up on why you did that, and his answer tells you want to do instead.)

Thanks, everyone. I figured out how to do it without a removeEventListener. (I used two addEventListener).

Thanks, again!