时间戳

首页 > 解决方案 > HTML CSS JS：悬停在图像上时无法打开弹出信息框

javascript - HTML CSS JS：悬停在图像上时无法打开弹出信息框

问题描述

我正在做一个项目，当我将鼠标悬停在特定图像上时，我必须使用 JavaScript 打开显示每个类别信息的弹出框。我已经编写了代码来执行这个特定的任务，但是
每当我将鼠标悬停在特定的图像上时都不会弹出框。我在下面有我的代码。

function popinfo() {
  var e = document.getElementById("horror-img"); //get image from html

  e.onmouseover = function() {
    document.getElementById('horror-pop').style.display = 'block';
  }

  e.onmouseout = function() {
    document.getElementById('horror-pop').style.display = 'none';
  }
}
#horror-pop {
  display: none
}
<div id="p-float">
  <div class="p-float">
    <div class="p-float-in">
      <center><img class="p-img" src="IMAGES\horror.jpg" alt=l ogo/ onmouseover="popinfo()" id="horror-img"><br/>
        <div class="p-name">Horror Fiction</div>
    </div>
  </div>
  </center>
</div>
<div id="horror-pop"> Horror Text </div>

现在这个例子是针对一张图片的，每当我将鼠标悬停在图片上时，我什么也得不到。没有弹出框。我也很好奇，如果您有例如 4 张图片，并且您希望弹出框为每张图片显示不同的信息，我们如何才能动态地使用一个函数来为每张图片显示不同的文本？

感谢您对上述问题的帮助。先感谢您 。

标签： javascripthtmlcss

解决方案

您的元素 id 不是 img，但您可以尝试使用类 p-img。

推荐阅读