在鼠標懸停時在Chrome中閃爍的問題div

Question

我寫了一個JavaScript，它根據提供給它的jSON數據生成動態元素。

$(function() { 
     var list = JSON.parse(@ViewBag.NomineeList); 
     var counter = 1; 
     var tr; 
     $(list).each((function() { 
      if (counter % 2 != 0) { 
       tr = CreateElems('tr', null, null); 
      } 
      var td = CreateElems('td', null, null); 
      var div = CreateElems('div', 'dvBorder', null); 
      div.attr('empID', this.EmpId); 
      div.attr('nomineeID', this.Id); 
      RegisterEvents(div); 
      div.append('<img alt="user" src=' + this.UserImagePath + ' style="padding: 5px;" />'); 
      div.append(CreateElems('span', 'EmpolyeeName', this.FirstName)); 
      div.append(CreateElems('span', 'EmployeeEmail', this.Email)); 
      td.append(div); 
      tr.append(td); 
      if (counter % 2 == 0) { 
       $('#tblEmployee').append(tr); 
       tr = ""; 
      } 
      counter++; 
     })); 
    }); 

    function CreateElems(type,cssClass,value) 
    { 
     var elem = $(document.createElement(type)); 

     if(value != null) 
      elem.text(value); 

     if(cssClass!= null) 
      elem.addClass(cssClass); 

     return elem; 
    } 

有三個不同的事件，我已註冊爲創建的動態元素。

function RegisterEvents(crntDiv) { 
     var url; 
     $(crntDiv).click(function() { 
      url = "/home/SaveVote?nomineeId=" + $(crntDiv).attr('nomineeID'); 
      AjaxCall(url, false, crntDiv); 
     }); 

     $(crntDiv).mouseover(function() { 
      RemoveToolTip(); 
      url = "/home/GetDescription?nomineeId=" + $(crntDiv).attr('nomineeID'); 
      AjaxCall(url, true, crntDiv); 
     }); 

     $(crntDiv).mouseout(function() { 
      $(crntDiv).children('div.RollOverTip').remove(); 
     }); 

    } 

當鼠標滑過工具提示出現時。在這個事件中，我正在檢查是否有任何以前的工具提示存在於dom中，它應該被刪除。

function RemoveToolTip() { 
      $('#tblEmployee').find('div.RollOverTip').remove(); 
     } 

但是仍然有些時候瀏覽器上有三個以上的工具提示。也可以優化一下。

的Html

<table border="0" cellpadding="5" cellspacing="0" id="tblEmployee"> 
     </table> 

CSS類。

.dvBorder 
{ 
    background-image: url(/Images/screen2-button.png); 
    background-repeat: no-repeat; 
    height: 125px; 
    width: 400px; 
    cursor:pointer; 
    position: relative; 
} 


.RollOverTip 
{ 
    background-image: url("/Images/screen2-rollover-tooltip.png"); 
    background-repeat: no-repeat; 
    color: #000000; 
    font-family: Calibri Regular; 
    font-size: 18pt; 
    height: 199px; 
    line-height: 20pt; 
    margin-left: 385px; 
    position: absolute; 
    width: 474px; 
    z-index: 90000; 
    padding:34px; 
} 

什麼是可能的優化腳本，也有任何建議，以消除閃爍？

Answer 1

嘗試使用mouseenter和mouseleave停止閃爍

$(crntDiv).mouseenter(function() { 
     RemoveToolTip(); 
     url = "/home/GetDescription?nomineeId=" + $(crntDiv).attr('nomineeID'); 
     AjaxCall(url, true, crntDiv); 
    }); 

    $(crntDiv).mouseleave(function() { 
     $(crntDiv).children('div.RollOverTip').remove(); 
    }); 

Answer 2

嘗試使用mouseenter和mouseleave它可能會解決問題，而不是鼠標懸停和鼠標移開

編輯

試試這個： 變更

到

$(document).on('mouseenter',$(crntDiv,'#tblEmployee div.RollOverTip'), function() {...}