javascript - 当我们悬停在另一个 div 上时，隐藏的 div 出现并移动

Question

我想让隐藏的 div 出现并在我们悬停在另一个 div 上时移动。

我的代码有效，但它不会随着鼠标在 div 上的移动而移动!这很有意义，因为我正在使用悬停!我该如何解决这个问题？

$('#questionMarkId').hide();


    $('a').hover(function(e){
        e.preventDefault();

        $('#questionMarkId').css( 'position', 'absolute' );
        $('#questionMarkId').css( 'top', e.pageY );
        $('#questionMarkId').css( 'left', e.pageX );
        $('#questionMarkId').show();
    },function(){
      $('#questionMarkId').hide();

    })

Fiddle

谢谢

Answer 1

jQuery 悬停使用两个事件，mouseenter 和 mouseleave。

你需要的是mousemove!

$('#questionMarkId').hide();

$('a').css("display", "inline-block").hover(function(e){
    e.preventDefault();
    $('#questionMarkId').css( 'position', 'absolute' );
    $('#questionMarkId').show();
},function(){
  $('#questionMarkId').hide();

}).on("mousemove", function(e) { 
    $('#questionMarkId').css( 'top', e.pageY + 10 );
    $('#questionMarkId').css( 'left', e.pageX + 10 );
});

New fiddle

PS:我放了“display: inline-block”，因为你需要使用 block anchor ，否则，div 只会在你的鼠标恰好移动到字母上时显示，而不是所有 block 空间。