第二次懸停時顯示div的內容

我正在使用自定義工具提示，即ollows光標，但它僅在第二次懸停時發射。我從樓層到天花板搜索堆棧，我嘗試的所有建議都不是很有幫助。我儘可能簡單地編寫代碼，但是所有的代碼都在第二次懸停時運行。我沒有想法。第二次懸停時顯示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的解決方案是最優雅的......感謝所有人。 :)

來源

2015-06-28 Jack Bizon

也許你可以做一些簡單：

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

來源

2015-06-28 18:28:38 MrUpsidown

因爲您在附加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 
      }); 
     }); 
    } 
});

來源

2015-06-28 18:27:18 lmgonzalves

這是因爲你的init只有當JS綁定鼠標懸停懸停功能。

您必須直接使用懸停方法。

祝您有美好的一天！

來源

2015-06-28 18:28:19

我覺得這裏的問題是，第一懸停喲只做結合的元素的功能。我稍微修改了腳本，自動運行.show（）和調整.hide（）爲鼠標事件。就像這樣：

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/ 我希望它幫助。

來源

2015-06-28 18:28:46

我只是在這個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/

來源

2015-06-28 18:31:36 Bugaloo

試試這個更新

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

來源

2015-06-28 18:34:47

第二次懸停時顯示div的內容

回答

相關問題