var fx=document.getElementById("fenxiang");//分享
var fx_l=document.getElementById("fenxiang_list");//分享列表
fx.onmouseover=function(){//鼠标在“分享”上页面显示“分享列表"
fx_l.style.display="block";
};
fx.onmouseout=function(){//鼠标行色移开“分享”页面隐藏“分享列表"
fx_l.style.display="none";
};
var fx=document.getElementById("fenxiang");//分享
var fx_l=document.getElementById("fenxiang_list");//分享列表
fx.onmouseover=function(){//鼠标在“分享”上页面显示“分享列表"
fx_l.style.display="block";
};
fx.onmouseout=function(){//鼠标行色移开“分享”页面隐藏“分享列表"
fx_l.style.display="none";
};
</script>
<div style=" margin:100px; float:left">
<div style="width:80px; height:80px; float:left; background:#36F; margin-right:3px;" id="fenxiang"></div>
<div style="width:200px; height:80px; float:left; background:#F63" id="fenxiang_list"></div>
</div>
<div style=" margin:100px; float:left">
<div style="width:80px; height:80px; float:left; background:#36F; margin-right:3px;" id="fenxiang"></div>
<div style="width:200px; height:80px; float:left; background:#F63" id="fenxiang_list"></div>
</div>我加了个 DIV 上去 请问如何修改吖?
<div style=" margin:100px; float:left">
<div style="width:80px; height:80px; float:left; background:#36F; margin-right:3px;" id="fenxiang"></div>
<div style="width:200px; height:80px; float:left; background:#F63" id="fenxiang_list"></div>
</div>我加了个 DIV 上去 请问如何修改吖?不用改,JS是通过ID找到DOM元素,你确定ID是对的就可以了
<HEAD>
<TITLE> popout </TITLE>
<style>
div.xsh {width:80px; height:80px; margin-right:3px; float:left; position:relative;}
div.tch {width:80px; height:80px; display:none; position:relative; top:-90px;}
</style>
</HEAD> <BODY> <div style=" margin:100px; height:100px; float:left">
<div class="xsh" style="background:#36F; left:0px;">
<div class="tch" style="background:#F63;" id="fenxiang_list"></div>
</div>
<div class="xsh" style="background:yellow; left:0px;" onmouseover="this.childNodes[0].style.display='block'" onmouseout="this.childNodes[0].style.display='none'">
<div class="tch" style="background:green" id="renren_list"></div>
</div>
</div>
<SCRIPT LANGUAGE="JavaScript">
//js不写也可以,跟黄色div的效果是一样的
var arr = document.getElementsByTagName("div"); //取所有div
for (var i=0; i<arr.length; i++)
{
if (arr[i].className == "xsh") //找到样式是 xsh 的
{ //给这些div加上onmouseover 和 onmouseout
arr[i].onmouseover = function(){this.childNodes[0].style.display='block'}
arr[i].onmouseout = function(){this.childNodes[0].style.display='none'}
}
}
</SCRIPT>
</BODY>
鼠标放上去,宽度=几个图标的宽度之和
移开,宽度=0默认给dom元素设置一个最小宽度即可