Почему btn мигает при наведении мыши?

Question

Что я хочу сделать, так это: я хочу изображение, в котором нет ничего.Но когда пользователь наводит курсор мыши, я хочу отобразить кнопку (я уже получил это).Но у меня проблема с моей кнопкой, потому что, когда я нажимаю на кнопку мыши, она начинает мигать, и я не знаю, как это остановить.

function showBTN() {
    var x = document.getElementById('butt');
    x.style.display = 'block';
}

function removeBTN() {
    var y = document.getElementById('butt');
    y.style.display = 'none';
}

.container {
    position: relative;
}

.container img {
    width: 100%;
    height: auto;
}

.container .btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    text-align: center;
  }

<h6 class="date">October 13, 2017</h6>

<h3>Contact Mgmt. - C</h3>

<div class="container p-0 m-0">

 <img
     src="https://picsum.photos/254/384?grayscale"
     style="border-radius: 10px;"
     onmouseover="showBTN()"
     onmouseout="removeBTN()"
 />

  <a
    id="butt"
    style="display: none;"
    href="https://github.com"
    class="btn btn-outline-success">
   Github code
  </a>

</div>

Это Javascript, который я использую, чтобы кнопка появлялась и исчезала, когда пользователь наводит указатель мыши или убирает мышь.Эти функции вызываются в тег.

Это код, отвечающий за css, который я использую. Каждый раз, когда я наводю курсор мыши на кнопку, она начинает мигать, я пытаюсь остановить ее и заставить ее работать как обычно.

Answer 1

Почему бы вам не сделать это только с помощью CSS?

.show-n-hide .btn-show-n-hide {
  visibility: hidden;
}

.show-n-hide:hover .btn-show-n-hide {
  visibility: visible;
}

<div class="show-n-hide">
  <span>Let's pretent that I'm the image. Hover over me.</span>

  <a id="butt" href="https://github.com" class="btn btn-outline-success btn-show-n-hide"> Github code
</a>
</div>

Answer 2

Мигает, потому что при наведении курсора на кнопку срабатывает img mouseout.Помещение событий в img и контейнер кнопки решает его:

function showBTN() {
    var x = document.getElementById('butt');
    x.style.display = 'block';
}

function removeBTN() {
    var y = document.getElementById('butt');
    y.style.display = 'none';
}

.container {
    position: relative;
}

.container img {
    width: 100%;
    height: auto;
}

.container .btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    text-align: center;
  }

<h6 class="date">October 13, 2017</h6>

<h3>Contact Mgmt. - C</h3>

<div class="container p-0 m-0"
     onmouseover="showBTN()"
     onmouseout="removeBTN()">

 <img
     src="https://picsum.photos/254/384?grayscale"
     style="border-radius: 10px;"
 />

  <a
    id="butt"
    style="display: none;"
    href="https://github.com"
    class="btn btn-outline-success">
   Github code
  </a>

</div>