Question

如何用jquery完成：当鼠标移到表格某一个tr时，该tr中隐藏的div可见，当鼠标移开后，该div又隐藏？

我有一个表格，是由服务器端传的一个集合遍历得到的，我想实现：当鼠标移到表格某一个tr时，该tr中隐藏的div可见，当鼠标移开后，该div又隐藏的效果。我写的jquery如下：$(function(){
$(document).ready(function(){
$("#tabQuestion2 tr").mouseover(function(){
$(this).find("div").hide(500);
});
$("#tabQuestion2 tr").mouseout(function(){
$(this).find("div").show(500);
});
});
});
结果实验发现，表格就像浪花一样不停的动，想请教各位大神，望大神们不吝赐教！！！

Answer 1

第一种：
$("#tabQuestion2 tr").mouseover(function(){
$(this).find("div").show();
});
$("#tabQuestion2 tr").mouseout(function(){
$(this).find("div").hide();
});
第二种：
$("#tabQuestion2 tr").mouseover(function(){
for(var i=0;i<$("#tabQuestion2 tr").length;i++){
$("#tabQuestion2 tr:eq("+i+")").find("div").hide();
}
$(this).find("div").show();
});

把隐藏/显示的速度去掉你试试

Answer 2

如果是表格是动态传梯过来的，要使用动态绑定函数比如on()啊等，这要看你使用的jQuery版本，

$(function(){
 $("#tabQuestion2 tr").on('mouseover',function(){ $(this).find("div").hide(500);});
 $("#tabQuestion2 tr").on('mouseout',function(){ $(this).find("div").show(500);});
})

Answer 3

$().ready(function() {
	$("#tabQuestion2 tr").hover(function(){
		$(this).find("div:first").show();
	},function(){
		$(this).find("div:first").hide();
	});
});

追问

不行哦，这样只是表格的第一行有反应，鼠标移到其他行，也是第一行反应，鼠标移到的行没反应。。。

追答

不停的动是因为鼠标挪到tr内部的标签的时候 触发了mouseout事件
解决办法，最简单的已经给你发了

应该是写反了

$().ready(function() {
    $("#tabQuestion2 tr").hover(function(){
        $(this).find("div").hide();
    },function(){
        $(this).find("div").show();
    });
});

Answer 4

在你想隐藏的div外面再写个div，给最外层div一个id，通过id控制不是更好么
你为什么要遍历呢？

Answer 5

$('#nbq-tb').on('mouseover','.nbq-tr',function(){
		$('.data-trHover').hide();
		$(this).next().show();
		$(this).find('.nbq-ids').css('color','#006cd8');
	});
	$('#nbq-tb').on('mouseout','.nbq-tr',function(){
		$(this).find('.nbq-ids').css('color','#000');
		return false;
	});