css里面:
.p hover{
display:block
}
_display:none 你这个写法是兼容ie的写法,所以不显示了, 你在写一个display:none这样火狐里面也可以实现隐藏了!常见的特殊情况:之前曾对div设置过display:hidden。把$("#testTable").mouseout改成$("#testTable").mouseleavemouseout在鼠标移入子元素时也会触发,而mouseleave只会在鼠标移出本元素时触发
以下是完整代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript" src="jquery.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
//-----------------------------
var slowObj
var objWidth
var objHeight
var iter
var operator
var flag = true
function SlowDiv2(tableId,operator2){
slowObj = $("#"+tableId)
if(flag){
objWidth = slowObj.width()
objHeight = slowObj.height()
flag = false
}
slowObj.css({"overflow":"hidden"})
operator = operator2
if(operator=="show"){
slowObj.width(0)
slowObj.height(0)
}
iter = setInterval(operateTable,14)
}
function operateTable(){
var tmpWidth = slowObj.width()
var tmpHeight = slowObj.height()
if(operator=="hide"){
//隐藏table
if( (tmpWidth<=18 || tmpWidth-10<=0 ) &(tmpHeight<=18 || tmpHeight<=0)){
var d = clearInterval(iter)
slowObj.hide()
return
}else{
slowObj.width(tmpWidth-10)
slowObj.height(tmpHeight-10)
$("#ttest").val("-"+slowObj.width())
}
//$("#ttest").val(objWidth)
}else{
//显示table
slowObj.show()
if(tmpWidth+10>objWidth || tmpHeight+10>objHeight){
var d = clearInterval(iter)
slowObj.width(objWidth)
slowObj.height(objHeight)
return
}else{
slowObj.width(tmpWidth+20)
slowObj.height(tmpHeight+2)
$("#ttest").val("+"+slowObj.width())
}
// $("#ttest").val(objWidth)
}
}
$(document).ready(function(){
$("#S_switch").mouseover(function(){
SlowDiv2("testTable","show")
$("#S_switch").focus(function(){
$("#ttest").val("#S_switch")
})
}).mouseout(function(){
//alert("#S_switch out")
//SlowDiv2("testTable","show")
})
$("#testTable").mouseleave(function(){
// $("#ttest").val("table out")
SlowDiv2("testTable","hide")
}).mouseover(function(){
})
$("#testTable tr").mouseleave(function(){
//alert("tr out")
}).mouseover(function(){
//alert("tr over")
})
$("#testTable tr").css("background-color","pink")
})
</SCRIPT>
</HEAD>
<BODY>
<p id="S_switch" style="width:20pxbackground-color:grayfloat:lefttext-align:center">
<b>>></b>
</p>
<!-- div --->
<div style="width:302height:200pxbackground-color:pinkdisplay:none" id="testTable" >
<div style="background-color:#123abcwidth:100%">123213</div>
saf师大<br/>
1<br/>
1<br/>
</div>
</BODY>
</HTML>