javascript - Div出现在第二个悬停

我正在使用允许光标移动的自定义工具提示，但仅在第二次悬停时触发。我从地板到天花板搜索堆栈，我尝试过的所有建议都没有很大帮助。我使代码尽可能简单，但所有操作都在第二个悬停时进行。我没主意了。

这是代码

$(".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的解决方案是最优雅的...谢谢大家。 :)

最佳答案

您可能可以做一些简单的事情：

$(".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

关于javascript - Div出现在第二个悬停，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31103183/