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

Question

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 class="box" id="padding2"><img id="centerImage" width="59.25" height="58.125" src="images/ccbl-white.gif"  display="inline"><span onmouseenter="over()" onmouseleave="out()">Center for Character-based Leadership link one</span>
      </div>
      <div class="box" id="padding2"><img id="centerImage2" width="59.25" height="58.125" src="images/ccbl-white.gif"  display="inline"><span onmouseenter="over2()" onmouseleave="out2()">Center for Character-based Leadership link two</span>
      </div>
      <div class="box" id="padding2"><img id="centerImage3" width="59.25" height="58.125" src="images/ccbl-white.gif"  display="inline"><span onmouseenter="over3()" onmouseleave="out3()">Center for Character-based Leadership link three</span>
      </div>
      <div class="box" id="padding2"><img id="centerImage4" width="59.25" height="58.125" src="images/ccbl-white.gif"  display="inline"><span onmouseenter="over4()" onmouseleave="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";
  }

Answer 1

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 class="box" id="padding2"><img id="centerImage" width="59.25" height="58.125" src="images/ccbl-white.gif"  display="inline"><span onmouseenter="over()" onmouseleave="out()">Center for Character-based Leadership link one</span>
  </div>
  <div class="box" id="padding2"><img id="centerImage2" width="59.25" height="58.125" src="images/ccbl-white.gif"  display="inline"><span onmouseenter="over2()" onmouseleave="out2()">Center for Character-based Leadership link two</span>
  </div>
  <div class="box" id="padding2"><img id="centerImage3" width="59.25" height="58.125" src="images/ccbl-white.gif"  display="inline"><span onmouseenter="over3()" onmouseleave="out3()">Center for Character-based Leadership link three</span>
  </div>
  <div class="box" id="padding2"><img id="centerImage4" width="59.25" height="58.125" src="images/ccbl-white.gif"  display="inline"><span onmouseenter="over4()" onmouseleave="out4()">Center for Character-based Leadership link four</span>
  </div>
</div>

I also made a css only version that works:

.HasGifs > .In
{
  display: none;
}

.HasGifs > .Out 
{
  display: block;
}

.GifText:hover ~ img.Out
{
  display: none;
}

.GifText:hover ~ img.In
{
  display: block;
}

<div class="HasGifs">
<span class = "GifText">This is the text you hover over</span>
<img src = "https://c.tenor.com/f-tX-7Czy0YAAAAM/lol-antonio-tabet.gif" class = "In">
<img src = "https://c.tenor.com/ENGYP4P6VcMAAAAM/uks-unbreakable-kimmy-schmitd.gif" class = "Out">
</div>
<div class="HasGifs">
<span class = "GifText">This is the text you hover over</span>
<img src = "https://c.tenor.com/f-tX-7Czy0YAAAAM/lol-antonio-tabet.gif" class = "In">
<img src = "https://c.tenor.com/ENGYP4P6VcMAAAAM/uks-unbreakable-kimmy-schmitd.gif" class = "Out">
</div>
<div class="HasGifs">
<span class = "GifText">This is the text you hover over</span>
<img src = "https://c.tenor.com/f-tX-7Czy0YAAAAM/lol-antonio-tabet.gif" class = "In">
<img src = "https://c.tenor.com/ENGYP4P6VcMAAAAM/uks-unbreakable-kimmy-schmitd.gif" class = "Out">
</div>
<div class="HasGifs">
<span class = "GifText">This is the text you hover over</span>
<img src = "https://c.tenor.com/f-tX-7Czy0YAAAAM/lol-antonio-tabet.gif" class = "In">
<img src = "https://c.tenor.com/ENGYP4P6VcMAAAAM/uks-unbreakable-kimmy-schmitd.gif" class = "Out">
</div>
<div class="HasGifs">
<span class = "GifText">This is the text you hover over</span>
<img src = "https://c.tenor.com/f-tX-7Czy0YAAAAM/lol-antonio-tabet.gif" class = "In">
<img src = "https://c.tenor.com/ENGYP4P6VcMAAAAM/uks-unbreakable-kimmy-schmitd.gif" class = "Out">
</div>

Answer 2

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

    <div id="padding">
      <div class="box" 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;
  }