通过 jQuery 悬停时隐藏的 div 不显示答案

【问题标题】：Hidden div doesn't show on hover via jQuery通过 jQuery 悬停时隐藏的 div 不显示
【发布时间】：2019-10-23 14:09:29
【问题描述】：

我有一个链接，我希望在悬停时显示一个 div，全部通过 jQuery，以便使用 currentMousePos 定位项目，但没有任何反应。

我已尝试声明必须获取 currentMousePos 的 div 的类。

这里是 jQuery：

var currentMousePos = { x: -1, y: -1 };
    $(document).mousemove(function(event) {
    currentMousePos.x = event.pageX;
    currentMousePos.y = event.pageY;
    $(".hidden-img").css('top', currentMousePos.y);
    $(".hidden-img").css('left', currentMousePos.x);
});

这是 CSS：

.list-item > div.hidden-img {
    display: none;
    height:300px;
    width:290px;
    margin-left:10px;
    position: absolute;
    z-index:-20;
}

.list-item > a:hover + .list-item > div.hidden-img {
    display: block; 
}

这是 HTML：

<li class="list-item">
    <a class="project-title">Text to hover</a>
     <div class="hidden-img">
      <img src='a-project-called/kremer/1.png'>
     </div>
</li>

我希望 div hidden-img 显示在类项目标题的悬停上。

谢谢！

【问题讨论】：

标签： jquery image hide show mousemove

【解决方案1】：

目前您正在通过一些相当复杂的 CSS 选择器来控制 hiddenDiv 的显示模式。虽然其他人可能能够为您提供基于 CSS 的解决方案，但我认为更优雅的解决方案是使用 javascript 来切换显示模式。

通过在控制 html 元素的 onmouseenter 和 onmouseout 事件中调用一个函数来切换 hiddenDiv 的显示，您可以创建您正在寻找的悬停行为：

//takes in an ID, finds element using that ID, then toggles that
//  element's display between block and none
function toggleHiddenDisplay(id){
  elem = document.getElementById(id)
  if(elem.style.display == 'none'){
    elem.style.display = 'block';
  }else elem.style.display = 'none';
}

<html>
  <div>
    <a onmouseenter=toggleHiddenDisplay('hiddenDiv')
       onmouseout=toggleHiddenDisplay('hiddenDiv')>
       Text to Hover
    </a>
    <div id="hiddenDiv" 
       style="color:white; background-color:red; display:none;">
       Hidden Content
    </div>
  </div>
</html>

所以现在你有两个组件：

基于 Javascript/html 事件的设置以在悬停时切换显示模式
根据当前光标位置设置元素位置的 Jquery 脚本。

这两者可以集成为您提供组合切换+显示您想要的鼠标行为：

var currentMousePos = { x: -1, y: -1 };
    $(document).mousemove(function(event) {
    currentMousePos.x = event.pageX;
    currentMousePos.y = event.pageY;
    $(".hidden-img").css('top', currentMousePos.y);
    $(".hidden-img").css('left', currentMousePos.x);
});

function toggleHiddenDisplay(id){
  elem = document.getElementById(id)
  if(elem.style.display == 'none'){
    elem.style.display = 'block';
  }else elem.style.display = 'none';
}

.list-item > div.hidden-img {
    display: none;
    height:300px;
    width:290px;
    margin-left:10px;
    position: absolute;
    z-index:-20;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="list-item">
    <a class="project-title" onmouseenter=toggleHiddenDisplay("hoverDisplay") onmouseout=toggleHiddenDisplay("hoverDisplay")>Text to hover</a>
     <div class="hidden-img" id="hoverDisplay" style="display:none;">
      <img src='https://www.gravatar.com/avatar/fe56d599fb9eeafdde6be4b369d51512?s=328&d=identicon&r=PG&f=1'>
     </div>
</li>

【讨论】：

非常感谢！尽管如此，它还是行不通。在我的 JS 文件之前调用 jQuery，但图像不会显示在悬停时。控制台上没有显示错误。怎么回事？
我认为问题在于 CSS、JS 和 style="display:none;"当我悬停显示属性时，HTML 的原因保持为无，不会变成“块”
javascript 函数通过它们的 ID 查找元素，如果您注意到在示例中我已将 ID 添加到隐藏的 div。您是否在隐藏的 div 中添加了 ID？或者，您可以更改 javascript 以根据类名而不是 ID 查找元素。无论哪种方式，您都需要确保您在悬停时调用的函数实际上获取了正确的元素，无论是通过 ID、类还是其他方法。
是的，我在 getElementById 和隐藏的
标记中都有 ID。然而，显示属性不会从无变为阻塞。但是当我移动鼠标时，它显示顶部和左侧的位置发生变化。它得到了正确的元素，但它不会改变任何阻止。
而且顶部和左侧的位置也远非应有的位置，因为当我移动鼠标时，它显示顶部为 3/4000 像素，左侧为 1/2000 像素.. div 现在实际上出现，但不在鼠标指针旁边..