Блог

Главная - Вопросы по программированию - Почему btn мигает при наведении курсора мыши?

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

#javascript #html #css #button

#javascript #HTML #css — код #кнопка

Вопрос:

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

 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, который я использую, чтобы кнопка появлялась
и исчезала при наведении курсора мыши или перемещении курсора мыши.
Эти функции вызываются в теге a.

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

Комментарии:

1. Когда мышь перемещается по кнопке, она также перемещается за пределы изображения, вызывая mouseout обработчик, скрывающий кнопку. Затем, и я предполагаю, что два элемента перекрывают друг друга, курсор снова находится над изображением, поэтому mouseover запускается обработчик, и так далее. Возможно, было бы лучше поместить обработчики событий в родительский div элемент обоих элементов.

Ответ №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>

Ответ №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>
Метки: