网页资讯视频图片知道文库贴吧地图采购
进入贴吧全吧搜索
javascript吧 关注：269,376贴子：906,435
  • 13回复贴，共1页

关于js隐藏与显示div的问题

鼠标经过div层（one）显示隐藏的div层（two），鼠标放上（one），（two）会不停隐藏，显示，隐藏，显示，求解。


<html>
<head>
<style>
*{margin:0;padding:0}
#one{background-color:#ddd;width:480px;height:270px;}
#two{background: #000 none repeat scroll 0 0;
height: 270px;
left: 0;
opacity: 0.8;
position: absolute;
top: 0;
width: 480px;
}
#three{color:#fff;position: absolute;top:120;left:220;}
/*#one:hover #two, #one:hover #three{display:block;}*/
</style>
<script>
window.onload=function(){
document.getElementById("two").style.visibility = "hidden";
document.getElementById("three").style.visibility = "hidden";
document.getElementById("one").onmouseenter = function(){
document.getElementById("two").style.visibility = "visible";
document.getElementById("three").style.visibility = "visible";
}
document.getElementById("one").onmouseleave = function(){
document.getElementById("two").style.visibility = "hidden";
document.getElementById("three").style.visibility = "hidden";
}
}
</script>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three">更多</div>
</body>
</html>


求解






把 two three 放在 one 里面
<div id="one">
<div id="two"></div>
<div id="three">更多</div>
</div>
然后给 one 加样式 position:relative;


顶


<html>
<head>
<style>
* {
margin: 0;
padding: 0
}
#one {
background-color: #ddd;
width: 480px;
height: 270px;
}
#two {
background: #000 none repeat scroll 0 0;
height: 270px;
left: 0;
opacity: 0.8;
position: absolute;
top: 0;
width: 480px;
}
#three {
color: #fff;
position: absolute;
top: 120;
left: 220;
}
/*#one:hover #two, #one:hover #three{display:block;}*/
</style>
<script>
window.onload = function() {
document.getElementById("two").style.visibility = "hidden";
document.getElementById("three").style.visibility = "hidden";
document.getElementById("one").onmouseenter = function() {
document.getElementById("two").style.visibility = "visible";
document.getElementById("three").style.visibility = "visible";
}
document.getElementById("two").onmouseleave = function() {
document.getElementById("two").style.visibility = "hidden";
document.getElementById("three").style.visibility = "hidden";
}
}
</script>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three">更多</div>
</body>
</html>


扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！
  • 13回复贴，共1页
分享到: