鼠标放在某个文字上的时候,出来隐藏的div,js代码怎么写?
例如，放在“显示”上时，显示出下面那个div来<ahref="#">显示</a><divstyle="display:none;"id="aa">12345</div>...
例如，放在“显示”上时，显示出下面那个div来
<a href="#">显示</a>
<div style="display:none;" id="aa">
1
2
3
4
5
</div> 展开
<a href="#">显示</a>
<div style="display:none;" id="aa">
1
2
3
4
5
</div> 展开
9个回答
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body>
<script type="text/javascript">
function sMouseover(name,cursel,n){
for(i=1;i<=n;i++){
var con=document.getElementById("con_"+name+"_"+i);
con.style.display=i==cursel?"block":"none";
}
}
function sMouseout(name,cursel,n){
for(i=1;i<=n;i++){
var con=document.getElementById("con_"+name+"_"+i);
con.style.display="none";
}
}
</script>
<style type="text/css">
<!--
.STYLE5 { font-size: 16px;
line-height: 1.5;
font-family: "宋体";
}
.STYLE7 {position: relative;color: #FF0000}
.STYLE7 img{display:none; position: absolute; top: 20px; left:0;}
-->
</style>
<p>
<p><span class="STYLE5"><br />
形态特征 乔木，高达27m,胸径可达80cm。<span id="pic1" onMouseOver="sMouseover('pic','1','2')" onMouseout="sMouseout('pic','1','2')" class="STYLE7">树皮白色<img src="2000.gif" alt="" width="141" height="188" id="con_pic_1"/></span></span>
<span class="STYLE5"><span class="STYLE5">，纸片状，常平滑或开裂。小枝光滑无毛。<br />
下面密被树脂点，<span id="pic2" class="STYLE7" onMouseOver="sMouseover('pic','2','2')" onMouseout="sMouseout('pic','2','2')">叶三角状卵形至菱状卵形<img src="2000.gif" alt="" width="141" height="188" id="con_pic_2" style="display:none; position: absolute; top:20px; left:0; visibility: visible;" /></span>,叶缘为钝尖重锯齿，侧脉5-8对；叶柄无毛.</span></p>
<p> </p>
<p> </p>
</body>
</html>
如果有三个就加一个<span id="pic3" onMouseOver="sMouseover('pic','3','3')" onMouseout="sMouseout('pic','3','3')" class="STYLE7">树皮白色<img src="2000.gif" alt="" width="141" height="188" id="con_pic_3"/></span>
前面的sMouseout('pic','1','2')换成sMouseout('pic','1','3')
sMouseout('pic','2','2')换成sMouseout('pic','2','3')
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body>
<script type="text/javascript">
function sMouseover(name,cursel,n){
for(i=1;i<=n;i++){
var con=document.getElementById("con_"+name+"_"+i);
con.style.display=i==cursel?"block":"none";
}
}
function sMouseout(name,cursel,n){
for(i=1;i<=n;i++){
var con=document.getElementById("con_"+name+"_"+i);
con.style.display="none";
}
}
</script>
<style type="text/css">
<!--
.STYLE5 { font-size: 16px;
line-height: 1.5;
font-family: "宋体";
}
.STYLE7 {position: relative;color: #FF0000}
.STYLE7 img{display:none; position: absolute; top: 20px; left:0;}
-->
</style>
<p>
<p><span class="STYLE5"><br />
形态特征 乔木，高达27m,胸径可达80cm。<span id="pic1" onMouseOver="sMouseover('pic','1','2')" onMouseout="sMouseout('pic','1','2')" class="STYLE7">树皮白色<img src="2000.gif" alt="" width="141" height="188" id="con_pic_1"/></span></span>
<span class="STYLE5"><span class="STYLE5">，纸片状，常平滑或开裂。小枝光滑无毛。<br />
下面密被树脂点，<span id="pic2" class="STYLE7" onMouseOver="sMouseover('pic','2','2')" onMouseout="sMouseout('pic','2','2')">叶三角状卵形至菱状卵形<img src="2000.gif" alt="" width="141" height="188" id="con_pic_2" style="display:none; position: absolute; top:20px; left:0; visibility: visible;" /></span>,叶缘为钝尖重锯齿，侧脉5-8对；叶柄无毛.</span></p>
<p> </p>
<p> </p>
</body>
</html>
如果有三个就加一个<span id="pic3" onMouseOver="sMouseover('pic','3','3')" onMouseout="sMouseout('pic','3','3')" class="STYLE7">树皮白色<img src="2000.gif" alt="" width="141" height="188" id="con_pic_3"/></span>
前面的sMouseout('pic','1','2')换成sMouseout('pic','1','3')
sMouseout('pic','2','2')换成sMouseout('pic','2','3')
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<script>
function ddd(obj, sType) {
var oDiv = document.getElementById(obj);
if (sType == 'show') { oDiv.style.display = 'block';}
if (sType == 'hide') { oDiv.style.display = 'none';}
}
</script>
<a href="#" onmouseover="ddd('aa', 'show');" onmouseout="ddd('aa', 'hide');">显示</a>
<div style="display:none;" id="aa">
1
2
3
4
5
</div>
有不懂的可以Q我:309539194
function ddd(obj, sType) {
var oDiv = document.getElementById(obj);
if (sType == 'show') { oDiv.style.display = 'block';}
if (sType == 'hide') { oDiv.style.display = 'none';}
}
</script>
<a href="#" onmouseover="ddd('aa', 'show');" onmouseout="ddd('aa', 'hide');">显示</a>
<div style="display:none;" id="aa">
1
2
3
4
5
</div>
有不懂的可以Q我:309539194
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
cooant，dgh1985正解
补个最土的一种，可解决你的问题，不过不能扩展，不耐用。
选中“显示”打开行为面板.鼠标经过显示层，选aa就可以了。其实更复杂，只是直观啊。
163那种 4个
<script type="text/javascript">
<!--
function swap_tab(n){
for(var i=1;i<=4;i++){
var curC=document.getElementById("tab_"+i);
var curB=document.getElementById("tab_t"+i);
if(n==i){
curC.style.display="block";
}else{
curC.style.display="none";
}
}
}
//-->
</script>
<div class="Menu" >
<ul>
<li onmouseover="return swap_tab(1)" id="tab_t1">
<a href="#">栏目导航1</a>
</li>
<li onmouseover="return swap_tab(2)" id="tab_t2">
<a href="#">栏目导航2</a>
</li>
<li onmouseover="return swap_tab(3)" id="tab_t3">
<a href="#">栏目导航3</a>
</li>
<li onmouseover="return swap_tab(4)" id="tab_t4">
<a href="#">栏目导航4</a>
</li>
</ul>
</div>
<div class="content">
<div id="tab_1">
<div class="textList">
<ul>
<li>栏目内容1</li>
</ul>
</div>
</div>
<div id="tab_2" style="display: none;">
<div class="textList">
<ul>
<li>栏目内容2</li>
</ul>
</div>
</div>
<div id="tab_3" style="display: none;">
<div class="textList">
<ul>
<li>栏目内容3</li>
</ul>
</div>
</div>
<div id="tab_4" style="display: none;">
<div class="textList">
<ul>
<li>栏目内容4</li>
</ul>
</div>
</div>
</div>
直观的，
点Spry选Spry选项卡面板 ,样式按自己的要求改就可以了,上下改为左右(Dreamweaver cs3才有这个功能,Dreamweaver 8可没有,
补个最土的一种，可解决你的问题，不过不能扩展，不耐用。
选中“显示”打开行为面板.鼠标经过显示层，选aa就可以了。其实更复杂，只是直观啊。
163那种 4个
<script type="text/javascript">
<!--
function swap_tab(n){
for(var i=1;i<=4;i++){
var curC=document.getElementById("tab_"+i);
var curB=document.getElementById("tab_t"+i);
if(n==i){
curC.style.display="block";
}else{
curC.style.display="none";
}
}
}
//-->
</script>
<div class="Menu" >
<ul>
<li onmouseover="return swap_tab(1)" id="tab_t1">
<a href="#">栏目导航1</a>
</li>
<li onmouseover="return swap_tab(2)" id="tab_t2">
<a href="#">栏目导航2</a>
</li>
<li onmouseover="return swap_tab(3)" id="tab_t3">
<a href="#">栏目导航3</a>
</li>
<li onmouseover="return swap_tab(4)" id="tab_t4">
<a href="#">栏目导航4</a>
</li>
</ul>
</div>
<div class="content">
<div id="tab_1">
<div class="textList">
<ul>
<li>栏目内容1</li>
</ul>
</div>
</div>
<div id="tab_2" style="display: none;">
<div class="textList">
<ul>
<li>栏目内容2</li>
</ul>
</div>
</div>
<div id="tab_3" style="display: none;">
<div class="textList">
<ul>
<li>栏目内容3</li>
</ul>
</div>
</div>
<div id="tab_4" style="display: none;">
<div class="textList">
<ul>
<li>栏目内容4</li>
</ul>
</div>
</div>
</div>
直观的，
点Spry选Spry选项卡面板 ,样式按自己的要求改就可以了,上下改为左右(Dreamweaver cs3才有这个功能,Dreamweaver 8可没有,
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style type="text/css">
.hidden {
display:none;
}
.show {
display:block;
}
</style>
<a href="#" onmouseover="document.getElementById('aa').className='show'">显示</a>
<div class="hidden" id="aa">
1
2
3
4
5
</div>
实在不懂可以加这个群问哦。50185107
.hidden {
display:none;
}
.show {
display:block;
}
</style>
<a href="#" onmouseover="document.getElementById('aa').className='show'">显示</a>
<div class="hidden" id="aa">
1
2
3
4
5
</div>
实在不懂可以加这个群问哦。50185107
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
一般是鼠标放上去显示，拿开鼠标时又消失，楼主是不是要实现这样的功能，用下面的代码就行......
<a href="#" onmouseover="aa.style.display=''" onmouseout="aa.style.display='none'">显示</a>
<div style="display:none;" id="aa">
1
2
3
4
5
</div>
<a href="#" onmouseover="aa.style.display=''" onmouseout="aa.style.display='none'">显示</a>
<div style="display:none;" id="aa">
1
2
3
4
5
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（7）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
