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

【问题标题】：HTML CSS JS : unable to open pop up information box when hovering over an imageHTML CSS JS：悬停在图像上时无法打开弹出信息框
【发布时间】：2020-05-10 23:36:10
【问题描述】：

我正在做一个项目，当我将鼠标悬停在特定图像上时，我必须使用 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 张图片，并且您希望弹出框为每张图片显示不同的信息，我们如何才能动态地使用一个函数来为每张图片显示不同的文本？

感谢您对上述问题的帮助。提前谢谢你。

【问题讨论】：

标签： javascript html css

【解决方案1】：

HTML 代码

<div id ="p-float">  
 <div class="p-float"><div class="p-float-in">
 <center> <img class="p-img" src="IMAGES\horror.jpg" alt = "logo" onmouseover  = "popinfo()" id = "horror-img"> Text</h1><br/>
        <div class="p-name">Horror Fiction</div>

</center></div>

</div>
</div>

<div id = "horror-pop"> Horror Text </div>

CSS 代码

#horror-pop{
display: none;
}

JS 代码

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';
}   
}

您需要更改您所调用的变量 e 的 id。此外，您的 html 代码标签未正确关闭中心标签必须先关闭，然后才能关闭它之外的 div。

对于多个图像，您可以使用 if else 为所有图像分配 id 并相应地在其中使用 JS，或者您可以简单地将它们标识为序列，以便您可以立即识别它们。

【讨论】：

我把脚本放在我的 HTML 文件中，现在它运行了

【解决方案2】：

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

【讨论】：

【解决方案3】：

要使代码动态化以便 tit 可以适用于各种图像，请执行以下操作：

document.querySelectorAll('.p-img').forEach(element => {
    element.addEventListener('mouseover', (e) => {
        popinfo(e, 'show');
    });

    element.addEventListener('mouseout', (e) => {
        popinfo(e, 'hide');
    })
});

然后您可以将您的 popinfo 函数修改为：

function popinfo(element, action){

    if(action === 'show'){
        element.style.display = 'block';
    } else {
        element.style.display = 'none';
    }

}

【讨论】：

【解决方案4】：

试试这个

$(document).ready(function(){    
    var count = 0;
    $('#horror-img').mouseenter(function() {
        count++;
        $('.horror-pop').show();
    });

    $('#horror-img').mouseleave(function() {
        count--;
        if (count == 0) { 
            $('horror-pop').hide();
        }
    });
});

【讨论】：