Question

我在页面上有几个图标，单击这些图标可以触发模式弹出窗口。有没有一种方法可以使该图标在模态激活后保持悬停状态，然后在模态关闭时又返回关闭状态？

我以为我可以使用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>

Answer 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');。

如何使触发模式弹出窗口的按钮保持悬停状态？

1 个答案: