css里怎么设置让一段文字隐藏，然后鼠标悬停又出现那段字，如果要用js的话，请把代码详细一点的写出来

JavaScript027

css里怎么设置让一段文字隐藏，然后鼠标悬停又出现那段字，如果要用js的话，请把代码详细一点的写出来,第1张

把后两个p标签，加上class=“p”,在标签的style里面，增加 display:none

css里面:

.p hover{

display:block

}

_display:none 你这个写法是兼容ie的写法，所以不显示了， 你在写一个display:none这样火狐里面也可以实现隐藏了！常见的特殊情况：之前曾对div设置过display：hidden。

把$("#testTable").mouseout改成$("#testTable").mouseleave

mouseout在鼠标移入子元素时也会触发，而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>