jquery鼠标悬停动画跳跃

Question

我有一个在<li>中循环的表。将鼠标悬停在每一行上时，将显示一个边框，并且将显示行 id="resFunc"。然而，在IE中，动画会上下跳跃。

谁有类似的经验或解决方案来解决这个问题？提前致谢!

<div id="resDetails" align="left">
          <table width="400px" class="resBox">
            <tr>
              <td><b>{creator}</b></td>          
            </tr>
            <tr>
              <td colspan="2"><div class="edit{_id}" id="{_id}"> {title}</div></td>
            </tr>
            <tr style="display:none" class="url{_id}">
               <td colspan="2" class="edit_url{_id}" id="{_id}">{url}</td>
           </tr>
            <tr>
              <td colspan="2" class="edit_area{_id}" id="{_id}">{description}</td>
            </tr>
            <tr id="resFunc{_id}" style="display:none">
              <td colspan="2" align="right"><b><a href="#" id="{_id}" class="editRes">Edit</a>&nbsp;&nbsp; <a href="#" class="deleteResource" id="{_id}">Delete</a></b>
               </td>
             </tr>
          </table><br>
        </div>

这是 onClick 函数:-

$(".resBox").mouseover(function(){ 
var id = $(this).attr("id"); 
$(this).addClass('highlight');  
$('#resFunc'+id).show();
}); 

$(".resBox").mouseout(function(){
var id = $(this).attr("id");
$(this).removeClass('highlight');
$('#resFunc'+id).hide();
});

Answer 1

您尝试过使用 mouseenter()和 mouseleave ，可能会有所帮助。

您还可以通过添加 alert('mouse over called'); 或 console.log 来测试鼠标悬停被调用的次数