Hidden div doesn't show on hover via jQuery

I have a link and on the hover of this I'd like a div to be shown, all via jQuery, so to position the item with currentMousePos, but nothing happens.

I have tried to declare the class of the div that has to get the currentMousePos.

Here is the 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);
});

This is the 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; 
}

And this is the 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>

I would like the div hidden-img to show on the hover of the class project-title.

Thanks!

Solution

Currently you are controlling the hiddenDiv's display mode through some rather complicated CSS selectors. While someone else may be able to offer you a CSS based soluton, I think a more elegant solution is using javascript to toggle the display mode instead.

By calling a function to toggle the hiddenDiv's display in the onmouseenter and onmouseout events of the controlling html element you can create the hover behavior you are looking for:

//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>

So now you have two components:

Javascript/html-event based setup to toggle display mode on hover
Jquery script that sets an elements position based on the current cursor position.

These two can be integrated to give you the combination toggle+display at mouse behavior you want:

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>