Question

我有一个链接，在它的悬停处，我希望通过jQuery显示一个div，以便使用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显示在项目名称标题的悬停上。

谢谢！

Answer 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-event的设置可在悬停时切换显示模式
基于当前光标位置设置元素位置的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>

隐藏的div不会通过jQuery悬停显示

1 个答案: