Question

我正在使用自定义工具提示，以便使用光标，但它仅在第二次悬停时触发。我从地板到天花板搜索堆栈，我尝试的所有建议都没有用。我使代码尽可能简单，但stil所有工作在第二个悬停。我没有想法。

这是代码

$(".bar").bind('mouseover',handler);
$(".bar").bind('mousemove', function(e){
  $('.tail').css({
      left:  e.pageX + 20,
      top:   e.pageY
  });
});


function handler(ev) {
    var target = $(ev.target);
    var elId = target.attr('id');
    if( target.is(".bar") ) {       
        $('#'+elId).hover(function() { 
           $('#tail'+elId).show();
        }, function() { 
           $('#tail'+elId).hide(); 
        });
    }
}

这就是小提琴 http://jsfiddle.net/hj57k/3070/

感谢或帮助。

修改哇伙计们，真的很快！所有解决方案都有效。每个人+1。但MrUpsidown的解决方案是最优雅的...感谢大家。：）

Answer 1

因为您在hover时附加了mouseover事件。您应该在开头附加hover事件，如下所示：

$(".bar").each(function(index,elem){
    var target = $(elem);
    var elId = target.attr('id');
    if( target.is(".bar") ) {
       $('#'+elId).hover(function() {
           $('#tail'+elId).show();
        }, function() { 
           $('#tail'+elId).hide(); 
        });

        $('#'+elId).bind('mousemove', function(e){
            $('#tail'+elId).css({
               left:  e.pageX + 20,
               top:   e.pageY
            });
        });
    }
});

Answer 2

这是因为只有在JS绑定鼠标悬停时才启动悬停功能。

您必须直接使用悬停方法。

祝你有个美好的一天！

Answer 3

你可以做一些更容易的事情：

$(".bar").bind('mouseenter', function () {

    $('#tail' + $(this).attr('id')).show();
});

$(".bar").bind('mouseleave', function () {

    $('#tail' + $(this).attr('id')).hide();
});

$(".bar").bind('mousemove', function (e) {

    $('#tail' + $(this).attr('id')).css({
        left: e.pageX + 20,
        top: e.pageY
    });
});

JSFiddle demo

Answer 4

我认为你的问题是第一个悬停你只会将元素绑定到函数。我稍微修改了你的脚本，自动运行.show（）并将.hide（）调节到mouseout事件。像这样：

function handler(ev) {
var target = $(ev.target);
var elId = target.attr('id');
if( target.is(".bar") ) {
   $('#tail'+elId).show(); 
   $('#'+elId).mouseout(function() { 
        $('#tail'+elId).hide();            
    });

    $('#'+elId).bind('mousemove', function(e){
        $('#tail'+elId).css({
           left:  e.pageX + 20,
           top:   e.pageY
        });
    });
}

}

你可以在这里看到http://jsfiddle.net/cc7s9rcf/ 我希望它有所帮助。

Answer 5

我刚刚在此javascript中添加了display:block

    $('#'+elId).bind('mousemove', function(e){
       $('#tail'+elId).css({
           left:  e.pageX + 20,
           top:   e.pageY,
           display:'block'
       });
   });

http://jsfiddle.net/hj57k/3273/

Answer 6

尝试此更新

$(".bar").bind('mouseover',handler);
/*
$('.bar').hover(function() { 
        $('.tail').show();
    }, function() { 
        $('.tail').hide(); 
});
*/
function handler(ev) {
    console.dir(ev);
    var target = $(ev.target);
    var elId = target.attr('id');

    if( target.is(".bar") ) {
        console.dir(ev.type);
        if (ev.type === 'mouseover') {
            $('#tail'+elId).show();
        } else {
            $('#tail'+elId).hide(); 
        }
        /*
       $('#'+elId).hover(function() { 
           $('#tail'+elId).show();
        }, function() { 
           $('#tail'+elId).hide(); 
        });*/

        $('#'+elId).bind('mousemove', function(e){
            $('#tail'+elId).css({
               left:  e.pageX + 20,
               top:   e.pageY
            });
        });
    }
}

https://jsfiddle.net/hj57k/3276/

第二次悬停时出现分支

6 个答案: