How to stop onmouseleave() from 'bubbling' to other siblings using vanilla JS?-CodePudding

I put the below code up on gileslewey.com so you can see the issue easily.

I have remote, animated .gif rollovers set for each span tag in a series of heads--I used <span> to vertically center the head next to an image (it's actually the same image, I haven't refactored any of the code yet). The first onmouseenter (or onmouseover, I tried both) and onmouseleave (or onmouseout) event works fine, but when I move to the next span head and leave, the onmouseleave fires for both. And if I move to the third and move away cursor, onmouseleave fires for all three. Can anyone suggest a fix for this, so onmouseleave is triggered only when leaving that particular span?

    <div id="padding">
      <div  id="padding2"><img id="centerImage" width="59.25" height="58.125" src="images/ccbl-white.gif"  display="inline"><span onm ouseenter="over()" onm ouseleave="out()">Center for Character-based Leadership link one</span>
      </div>
      <div  id="padding2"><img id="centerImage2" width="59.25" height="58.125" src="images/ccbl-white.gif"  display="inline"><span onm ouseenter="over2()" onm ouseleave="out2()">Center for Character-based Leadership link two</span>
      </div>
      <div  id="padding2"><img id="centerImage3" width="59.25" height="58.125" src="images/ccbl-white.gif"  display="inline"><span onm ouseenter="over3()" onm ouseleave="out3()">Center for Character-based Leadership link three</span>
      </div>
      <div  id="padding2"><img id="centerImage4" width="59.25" height="58.125" src="images/ccbl-white.gif"  display="inline"><span onm ouseenter="over4()" onm ouseleave="out4()">Center for Character-based Leadership link four</span>
      </div>
    </div>

JS: (not refactored yet)

  function over(){
  document.getElementById("centerImage").src="images/imagemouseover.gif";
  }

  function out(){
  document.getElementById("centerImage").src="images/imagemouseout.gif";
  }

  function over2(){
  document.getElementById("centerImage2").src="images/imagemouseover.gif";
  }

  function out2(){
  document.getElementById("centerImage2").src="images/imagemouseout.gif";
  }

  function over3(){
  document.getElementById("centerImage3").src="images/imagemouseover.gif";
  }

  function out3(){
  document.getElementById("centerImage3").src="images/imagemouseout.gif";
  }

CodePudding user response：

I turned your code to a snippet and it seems to be working correctly.
The correct image is being affected for every span.

function over(){
  document.getElementById("centerImage").src="images/imagemouseover.gif";
}

function out(){
  document.getElementById("centerImage").src="images/imagemouseout.gif";
}

function over2(){
  document.getElementById("centerImage2").src="images/imagemouseover.gif";
}

function out2(){
  document.getElementById("centerImage2").src="images/imagemouseout.gif";
}

function over3(){
  document.getElementById("centerImage3").src="images/imagemouseover.gif";
}

function out3(){
  document.getElementById("centerImage3").src="images/imagemouseout.gif";
}

<div id="padding">
  <div  id="padding2"><img id="centerImage" width="59.25" height="58.125" src="images/ccbl-white.gif"  display="inline"><span onm ouseenter="over()" onm ouseleave="out()">Center for Character-based Leadership link one</span>
  </div>
  <div  id="padding2"><img id="centerImage2" width="59.25" height="58.125" src="images/ccbl-white.gif"  display="inline"><span onm ouseenter="over2()" onm ouseleave="out2()">Center for Character-based Leadership link two</span>
  </div>
  <div  id="padding2"><img id="centerImage3" width="59.25" height="58.125" src="images/ccbl-white.gif"  display="inline"><span onm ouseenter="over3()" onm ouseleave="out3()">Center for Character-based Leadership link three</span>
  </div>
  <div  id="padding2"><img id="centerImage4" width="59.25" height="58.125" src="images/ccbl-white.gif"  display="inline"><span onm ouseenter="over4()" onm ouseleave="out4()">Center for Character-based Leadership link four</span>
  </div>
</div>

CodePudding user response：

You can do all this just using CSS, for instance:

    <div id="padding">
      <div  id="padding2"><img id="centerImage" width="59.25" height="58.125" src="images/ccbl-white.gif"  display="inline"><img id="centerImage_over" width="59.25" height="58.125" src="images/imagemouseover.gif">
   ...

with CSS like:

  div:hover #centerImage {
    display:none;
  }
  #centerImage_over {
    display:none;
  }
  div:hover #centerImage_over {
    display:inline;
  }