Question

我希望Hidden div出现并在我们悬停在另一个div上时移动。

我的代码有效，但是当moue在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 hover使用两个事件，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：我已经把＆＃34;显示：inline-block＆＃34;，因为你需要使用一个块锚，如果没有，div只会在鼠标移动到字母上时显示，而不是所有的块空间。

Answer 2

你可以尝试这样的事情。这是fiddle

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


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

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

2 个答案: