Hovering over all buttons in vanilla JS

Issue

I need the refresh_button to appear and disappear only on mouseover/mouseout on the avatar(image).
I’ve build this functionality and it works, however, it appears on image hover + on span hover too.
Could you please spot what’s wrong?
When I use the same code on .avatar class it doesn’t work, I think the .r reference is null in that case. I need to use vanilla JavaScript.
Thank you

document.querySelectorAll(".tree").forEach(img => {
  img.onmouseover = function () {
    let refresh_button = img.querySelector(".r");
    refresh_button.style.opacity = 1;
  };
  img.onmouseout = function () {
    let refresh_button = img.querySelector(".r");
    refresh_button.style.opacity = 0;
  };
});
#no1 {
  display: flex;
  justify-content: center;
  width: 190px;
  line-height: 16px;
  margin: auto;
}

.container1 {
  width: 580px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 11px;
  text-align: center;
  margin: auto;
}

.namefunc {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.name {
  background: #beebb3;
  border-color: #606f46;
  border-radius: 22px 0 22px 0;
  padding: 2px;
  padding-bottom: 5px;
  border-style: solid;
  margin-top: 5px;
  box-shadow: 4px 4px 13px #222;
  width: 145px;
  color: green;
}

.name_input {
    background: #beebb3;
    border: none;
    text-align: center;
    margin-left: 5px;
    margin: 4px;
    color: green;
}

.r {
  background-image: url('img/refresh2.png');
  background-size: contain;

}

.refresh {
  outline: none;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  position: absolute;
  right: 3px;
  top: 108px;
  opacity: 0;

}

.tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
  position: relative;
}


img {
  border-radius: 100%;
  width: 150px;
  height: 150px;
  box-shadow: 8px 8px 13px #222;
  border: solid 3px #606f46;
}
<div class="container1">
    <div id="no1">
      <div class="tree">
        <div class="avatar">
          <img src="https://entertainment.time.com/wp-content/uploads/sites/3/2013/05/fictioninfluence_list_homersimpson.jpg">
        </div>
        <button id="btn1" class="refresh r"> </button>
        <span id="spn1" class="name">
          <input class="name_input" type="text" disabled="true" value="Homer Simpson">
          <div class="namefunc">
            <button class="check">Save</button>
            <button class="close">Delete</button>
          </div>
        </span>
      </div>
      <div class="tree">
        <div class="avatar">
          <img class="white_bg" src="https://static.wikia.nocookie.net/theultimatesimpsons/images/0/0f/Marge-Simpson-icon.png/revision/latest?cb=20180210061653">
        </div>
        <button id="btn2" class="refresh r"></button>
        <span id="spn2" class="name">
          <input class="name_input" type="text" disabled="true" value="Marge Simpson">
          <div class="namefunc">
            <button class="check">Save</button>
            <button class="close">Delete</button>
          </div>
        </span>
      </div>
    </div>

Solution

In the JS, just because you call the variable img doesn’t mean that you are working with the image element, you are working with div.tree nodes.

Addendum: per OP "I need the button to not disappear when hovering over the image and then over the button"

Move the buttons inside .avatar and act on the avatar mouse events:

document.querySelectorAll(".tree").forEach(tn => {
  let ava = tn.querySelector(".avatar");
  let btn = tn.querySelector(".avatar .r");

  ava.onmouseover = function() {
    btn.style.opacity = 1;
  };

  ava.onmouseout = function() {
    btn.style.opacity = 0;
  };
});
#no1 {
  display: flex;
  justify-content: center;
  width: 190px;
  line-height: 16px;
  margin: auto;
}

.container1 {
  width: 580px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 11px;
  text-align: center;
  margin: auto;
}

.namefunc {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.name {
  background: #beebb3;
  border-color: #606f46;
  border-radius: 22px 0 22px 0;
  padding: 2px;
  padding-bottom: 5px;
  border-style: solid;
  margin-top: 5px;
  box-shadow: 4px 4px 13px #222;
  width: 145px;
  color: green;
}

.name_input {
  background: #beebb3;
  border: none;
  text-align: center;
  margin-left: 5px;
  margin: 4px;
  color: green;
}

.r {
  background-image: url('img/refresh2.png');
  background-size: contain;
}

.refresh {
  outline: none;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  position: absolute;
  right: 3px;
  top: 108px;
  opacity: 0;
}

.tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
  position: relative;
}

img {
  border-radius: 100%;
  width: 150px;
  height: 150px;
  box-shadow: 8px 8px 13px #222;
  border: solid 3px #606f46;
}
<div class="container1">
  <div id="no1">
    <div class="tree">
      <div class="avatar">
        <img src="https://entertainment.time.com/wp-content/uploads/sites/3/2013/05/fictioninfluence_list_homersimpson.jpg">
        <button id="btn1" class="refresh r"> </button>
      </div>
      <span id="spn1" class="name">
          <input class="name_input" type="text" disabled="true" value="Homer Simpson">
          <div class="namefunc">
            <button class="check">Save</button>
            <button class="close">Delete</button>
          </div>
        </span>
    </div>
    <div class="tree">
      <div class="avatar">
        <img class="white_bg" src="https://static.wikia.nocookie.net/theultimatesimpsons/images/0/0f/Marge-Simpson-icon.png/revision/latest?cb=20180210061653">
        <button id="btn2" class="refresh r"></button>
      </div>
      <span id="spn2" class="name">
          <input class="name_input" type="text" disabled="true" value="Marge Simpson">
          <div class="namefunc">
            <button class="check">Save</button>
            <button class="close">Delete</button>
          </div>
        </span>
    </div>
  </div>

Answered By – fnostro

Answer Checked By – David Marino (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.