Show hidden button on mouseover/ mouseout with vanilla JS

April 30, 2022

var dt = new Date();

document.getElementById("datetime").innerHTML = dt.toLocaleDateString('default', { day: 'numeric' , month: 'long', year:'numeric' });

document.getElementById("btn1").onmouseover = function() {mouseOver();};
document.getElementById("btn1").onmouseout = function() {mouseOut();};

function mouseOver() {
  document.getElementById("btn1").style.visibility = "visible";
}

function mouseOut() {
  document.getElementById("btn1").style.visibility = "hidden";

}

* {
  margin: 0;
  padding: 0;
}

body {
  background: url(img/bg4.jpg);
  background-size: cover;
}

img {
  border-radius: 100%;
  width: 150px;
  height: 150px;
  box-shadow: 8px 8px 13px #222;
  border: solid 3px #606f46;
}

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

h1 {
  /* width: 580px; */
  font-family: 'Sofia', cursive;
  font-size: 3.4rem;
  text-align: center;
  margin: 10px auto;
  padding-top: 15px;
  padding-bottom: 15px;
}

h2 {
    font-family: 'Sofia', cursive;
    font-size: 2rem;
}

#btn1 {
  pointer-events: all;

}

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

}

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


#no1 {
  display: flex;
  justify-content: center;
  width: 190px;
  line-height: 16px;
  margin: auto;
}

#no2 {
  display: flex;
  justify-content: center;
  width: 190px;
  line-height: 16px;
  margin: auto;
  margin-top: 9px;
}

#no3 {
  display: flex;
  justify-content: center;
  width: 190px;
  line-height: 16px;
  margin: auto;
  margin-top: 8px;
}

#no4 {
  display: flex;
  justify-content: center;
  width: 190px;
  line-height: 16px;
  margin: auto;
  margin-top: 9px;
}

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

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

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

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

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

.white_bg {
  background-color: white;
}

.container1_row4 {
  display: flex;
  justify-content: center;
  margin-left: 240px;
  position: relative;
  right: 10px;
}

.container2_row4 {
  display: flex;
  justify-content: center;
  margin-left: 35px;
  margin-right: 150px;
  position: relative;
  right: 25px;
}

.container3_row4 {
  display: flex;
  justify-content: center;
  margin-right: 240px;
}

.level1 {
  height: 3px;
  width: 110px;
  border-style: hidden solid solid solid;
  border-width: thick;
  margin-left: 230px;
}

.oblique1 {
  width: 88px;
  transform: rotate(-30deg);
  border-width: thick;
  border-style: hidden hidden solid hidden;
}

.oblique2 {
  width: 88px;
  transform: rotate(30deg);
  border-width: thick;
  border-style: hidden hidden solid hidden;
}

.oblique_row {
  display: flex;
  margin-left: 200px;
  margin-top: 17px;
}

.line_container2 {
  display: flex;
}

.first_arrow_row2 {
  position: relative;
  right: 125px;
}

.second_arrow_row2 {
  position: relative;
  right: 150px;
}

.second_arrow_row2>.oblique_row>.oblique1 {
  border-style: hidden;
}

.line_container3 {
  display: flex;
}

.line2 {
  width: 45px;
  transform: rotate(90deg);
  border-width: thick;
  border-style: hidden hidden solid hidden;
}

.first_arrow_row3 {
  position: relative;
  right: 165px;
}

.second_arrow_row3 {
  position: relative;
  right: 295px;
}

.third_arrow_row3 {
  position: relative;
  right: 295px;
}

.third_arrow_row3>.oblique_row>.line2 {
  position: relative;
  left: 70px;
}

.second_arrow_row3>.oblique_row>.line2 {
  position: relative;
  left: 70px;
}

.first_arrow_row3>.oblique_row {
  position: relative;
  right: 25px
}

.first_arrow_row3>.level1 {
  position: relative;
  left: 60px
}

.first_arrow_row3>.oblique_row>.oblique1 {
  width: 155px;
  transform: rotate(344deg);
}

.first_arrow_row3>.oblique_row>.oblique2 {
  width: 155px;
  transform: rotate(16deg);
}

#datetime {
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <title>Family Tree</title>
  <link rel="shortcut icon" href="img/family-tree.png" type="image/x-icon">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Sofia&display=swap" rel="stylesheet">
</head>

<body>

  <div class="container1">
    <h1>_ _ _ Family tree _ _ _</h1>
    <div id="no1">
      <div class="tree homer">
        <img src="https://entertainment.time.com/wp-content/uploads/sites/3/2013/05/fictioninfluence_list_homersimpson.jpg">
        <button id="btn1" class="refresh r"> </button>
        <span>
          Homer Simpson
        </span>
      </div>
      <div class="tree marge">
        <img class="white_bg" src="https://static.wikia.nocookie.net/theultimatesimpsons/images/0/0f/Marge-Simpson-icon.png/revision/latest?cb=20180210061653">
        <button type="button" name="button"></button>
        <span>
          Marge Simpson
        </span>
      </div>
    </div>

    <div class="line_container1">
      <div class="level1"></div>
      <div class="oblique_row">
        <div class="oblique1"></div>
        <div class="oblique2"></div>
      </div>
    </div>

  </div>

  <div class="container2">


    <div id="no2">
      <div class="tree">
        <img src="https://openpsychometrics.org/tests/characters/test-resources/pics/S/2.jpg">
        <span>
          Bart Simpson
        </span>
      </div>
      <div class="tree">
        <img src="https://mella187.github.io/Cartoon-Hero/img/lisa-avatar.jpg">
        <span>
          Lisa Simpson
        </span>
      </div>
      <div class="tree">
        <img src="https://i.pinimg.com/originals/e5/4a/bc/e54abc44b68d6b2770696b789b20dafa.png">
        <span>
          Abraham Simpson
        </span>
      </div>
      <div class="tree">
        <img class="white_bg" src="https://icons.iconarchive.com/icons/jonathan-rey/simpsons/256/Maggie-Simpson-icon.png">
        <span>
          Maggie Simpson
        </span>
      </div>

    </div>

    <div class="line_container2">

      <div class="first_arrow_row2">
        <div class="level1"> </div>
        <div class="oblique_row">
          <div class="oblique1"></div>
          <div class="oblique2"></div>
        </div>
      </div>
      <div class="second_arrow_row2">
        <div class="level1"> </div>
        <div class="oblique_row">
          <div class="oblique1"></div>
          <div class="oblique2"></div>
        </div>
      </div>


    </div>
  </div>


  <div class="container3">


    <div id="no3">
      <div class="tree">
        <img class="white_bg" src="https://cdn.quotesgram.com/img/7/98/1464708000-Ned_Flanders.png">
        <span>
          Ned Flanders
        </span>
      </div>
      <div class="tree">
        <img class="white_bg" src="https://i.pinimg.com/originals/b7/4f/ae/b74faea8de35d22b703b6ae32f891a92.png">
        <span>
          Elizabeth Hoover
        </span>
      </div>
      <div class="tree">
        <img class="white_bg" src="https://static.wikia.nocookie.net/p__/images/3/3a/Seymour_Skinner.png/revision/latest/top-crop/width/360/height/360?cb=20200804144332&path-prefix=protagonist">
        <span>
          Seymour Skinner
        </span>
      </div>
      <div class="tree">
        <img class="white_bg" src="https://www.personality-database.com/profile_images/20160.png">
        <span> Edna Krabappel
        </span>
      </div>


      <div class="tree">
        <img class="white_bg" src="https://static.wikia.nocookie.net/p__/images/b/b4/Barnild_Gumble.png/revision/latest/top-crop/width/360/height/360?cb=20160402113506&path-prefix=protagonist">
        <span>
          Barney Gumble
        </span>
      </div>
      <div class="tree">
        <img class="white_bg" src="https://static.wikia.nocookie.net/simpsons/images/d/d5/Patty_Bouvier1.png/revision/latest/top-crop/width/360/height/360?cb=20201222215313">
        <span>
          Selma Bouvier
        </span>
      </div>
    </div>

    <div class="line_container3">

      <div class="first_arrow_row3">
        <div class="level1"> </div>
        <div class="oblique_row">
          <div class="oblique1"></div>
          <div class="line2"></div>
          <div class="oblique2"></div>
        </div>
      </div>
      <div class="second_arrow_row3">
        <div class="level1"> </div>
        <div class="oblique_row">
          <div class="line2"></div>
        </div>
      </div>
      <div class="third_arrow_row3">
        <div class="level1"> </div>
        <div class="oblique_row">
          <div class="line2"></div>
        </div>
      </div>

    </div>

  </div>

  <div class="container4">


    <div id="no4">
      <div class="container1_row4">
        <div class="tree">
          <img src="https://www.canncentral.com/wp-content/uploads/2019/09/Kent_Brockman-Cannabis-1.jpg">
          <span>
            Kent Brockman
          </span>
        </div>
        <div class="tree">
          <img src="https://untappd.akamaized.net/site/beer_logos_hd/beer-1158277_7220b_hd.jpeg">
          <span>
            Mayor Quimby
          </span>
        </div>
        <div class="tree">
          <img src="https://i.pinimg.com/474x/8e/a1/2b/8ea12bd79870a03994fbf65f63baaa92--school-pictures-sideshow.jpg">
          <span>
            Sideshow Bob
          </span>
        </div>
      </div>
      <div class="container2_row4">
        <div class="tree">
          <img class="white_bg" src="https://static.wikia.nocookie.net/p__/images/8/81/Wiggum_with_coffee.png/revision/latest/top-crop/width/360/height/360?cb=20160322214733&path-prefix=protagonist">
          <span>
            Clancy Wiggum
          </span>
        </div>
      </div>
      <div class="container3_row4">
        <div class="tree">
          <img src="https://www.kindpng.com/picc/m/394-3940977_los-simpson-nikki-mckenna-hd-png-download.png">
          <span>
            Nikki McKenna
          </span>
        </div>
        <div class="tree">
          <img src="https://topicimages.mrowl.com/large/owl/thesimpsons/characters/milhousevanhou_1.jpg">
          <span>
            Milhouse Van Houten
          </span>
        </div>

      </div>
    </div>
  </div>

  <div class="datetime">
    <h2 id="datetime"></h2>
  </div>

<script src="index.js" charset="utf-8"></script>

</body>

</html>

I need the button near Homer to be invisible and only shown on mouseover, what do I do wrong? It is visible, and when I mouseover for the first time it inserts visibility: visible, then I mouse-out for the first time it disappears, and when mouseover again nothing happens. I need to use clean JS. No jQuerry.

>Solution :

It can’t react to the event being hidden (not present), here is an option using opacity:

var dt = new Date();

document.getElementById("datetime").innerHTML = dt.toLocaleDateString(
  "default",
  { day: "numeric", month: "long", year: "numeric" }
);
document.getElementById("btn1").style.opacity = 0;
document.getElementById("btn1").onmouseover = function () {
  mouseOver();
};
document.getElementById("btn1").onmouseout = function () {
  mouseOut();
};

function mouseOut() {
  document.getElementById("btn1").style.opacity = 0;
}

function mouseOver() {
  document.getElementById("btn1").style.opacity = 1;
}