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来测试鼠标移动的次数

Answer 2

给.mouseenter和.mouseleave一个镜头。

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

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

说明：

.mouseover（）将在每次将光标移动到元素上时触发，而.mouseenter只会在光标进入目标元素时触发一次，你猜对了。

jquery mouseover动画跳跃

2 个答案: