Как сделать так, чтобы кнопка, сработавшая в модальном всплывающем окне, оставалась в состоянии наведения?

У меня есть несколько значков на странице, при нажатии которых открывается модальное всплывающее окно. Есть ли способ заставить этот значок оставаться в состоянии наведения после активации модального окна, а затем вернуться в выключенное состояние при закрытии модального окна?

Я думал, что смогу сделать это с помощью OnMouseOver и Onclick, но это не помогает. Мне нужен способ, чтобы, когда модальное окно появляется сбоку, вы знали, какой значок вы щелкнули.

<a href="#myModal6" data-toggle="modal"><img src="assets/img/button_dots-white.svg" onMouseOver="this.src='assets/img/button_dots-orange.svg'" onMouseOut="this.src='assets/img/button_dots-white.svg'" height="30px" ></a>
1
0
47
1

Ответы 1

Вы не можете сделать это с помощью события onclick, потому что ваши события onmouseleave запускаются после вашего события onclick и его установки обратно в значение по умолчанию. но если вы используете div с фоновым изображением, вы можете сделать это, как я здесь:

.button-img {
  background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=');
  height: 30px;
  width: 200px;
}

.button-img:hover {
  background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.active {
  background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==') !important;
}
<a href="#myModal6" data-toggle="modal">
  <div class="button-img" onclick="this.classList.add('active');"></div>
</a>

если вы хотите избавиться от активного состояния, вам нужно только использовать yourElement.classList.remove('active'); в любое время, когда захотите.

Другие вопросы по теме