Home / Questions / 11536
Accepted
Marc Lemien
Asked: 2020-06-02 00:00:58 +0800 CST 2020-06-02 00:00:58 +0800 CST

如何在 onmouseover 中创建迷你窗口事件

  • 772

我在餐厅网站上有一个按钮，我希望当鼠标悬停在按钮上时，会出现一个迷你窗口：（https://es.theysay.me/ranking/111/）我认为事件也许 onmouseover 可以做到，有谁知道什么代码是最好的？如果可能的话，我需要一些代码很少的东西，因为我是如何制作网络的。谢谢。

我澄清这个网站是用Adob​​e Muse制作的。所以我需要的答案是一个脚本或一些代码很少的东西，我可以将其复制为图像顶部的 html 对象。

在此处输入图像描述

我可以将 HTML 代码插入到我想要的图像中。在这种情况下，Gastroranking 按钮是一个图像，我希望当我将鼠标悬停在它上面时会出现那个小弹出窗口。我不希望它是可点击的或任何东西，只是显示真实的排名。由于现在出现的小圆形按钮是我把它放在那里的，它实际上并没有实时显示真相。

javascript

2 Answers

  1. Best Answer

    通过 css 样式，您可以在将鼠标悬停在按钮上时显示元素，就像我在示例中放置的那样。

    我还包括允许使用 jQuery 在弹出元素中加载外部内容的 javascript 代码。在 Stack Overflow 环境中，它对您不起作用，因为出于安全原因他们不允许这样做，但您应该能够在您的网站上执行此操作。

    $(function(){
  $('.popup').load('https://es.theysay.me/ranking/111/');
});
    .popup{
  display: none;
  width: 150px;
  height: 100px;
  background-color: yellow;
}
.popup-button:hover .popup{
  display: block;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup-button">
  <button>Mostrar</button>
  <div class="popup">Contenido del popup</div>
</div>

    • 3

  2. 您是否已经使用过任何 javascript 包，例如 jquery ui 或 bootstrap？

    使用引导程序，您可以使用此文档弹出窗口，您可以在悬停时启动它

    使用 Bootstrap 的弹出框参考

    我希望我能帮助你。

    • 0