求一个简单的div+css示例
我想做一个小的div ，小div上面有一个大的div，大的div跟小的div一样宽，高度比小的高，鼠标放在小div上大div显示，覆盖小div。用javascript或css哪个实现都行。效果达到就可以。 div+css 鼠档悬停 javascript css
[解决办法]
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.xiao{
border: solid 1px ;
width: 100px;
height: 100px;
}
.xiao>.da{
background-color: #ccc;
width: 100%;
height: 200px;
display: none;
background-image: url(http://avatar.csdn.net/3/5/3/1_wangwang008.jpg);
background-size: 100% 100%;
}
.xiao:hover>.da{
display: block;
}
</style>
</head>
<body>
<div class="xiao">
<div class="da"></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.toopTip
{
background-color:Yellow;
border-style:solid;
border-width:1px;
border-color:Red;
}
</style>
<script language="javascript" type="text/javascript">
/*
如果希望提示的div的左边界与上边界与显示的div重叠，那么需要删除文档头W3C标准
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
*/
function initEvent() {
var divArray = document.getElementsByTagName("div");
for (var i = 0; i < divArray.length; i++) {
divArray[i].onmouseover = createDivDetailOne;
/*
无法用原始的div绑定鼠标移走的事件,因为明细的div的宽度长度都要大于原始div，
这样原始的div就被覆盖了，此时会自动触发onmouseout事件
*/
//divArray[i].onmouseout = removeDivDetail;
}
}
function createDivDetailOne() {
//保证divDetail div的唯一性
var divDetail = document.getElementById("divDetail");
if(divDetail)
{
document.body.removeChild(divDetail);
}
divObj = document.createElement("div");
divObj.className = "toopTip";
divObj.setAttribute("id", "divDetail");
divObj.style.position = "absolute";
divObj.style.width = "200px";
divObj.style.height = "100px";
var triggerObj = window.event.srcElement;
divObj.style.top = triggerObj.offsetTop;
divObj.style.left = triggerObj.offsetLeft;
divObj.innerHTML = triggerObj.innerText;
document.body.appendChild(divObj);
//此时用于明细的div已经覆盖了原div，所以覆盖的div要进行事件的处理
document.getElementById("divDetail").onmouseout = function() {
divObj = this;
if (!divObj) {
return;
}
document.body.removeChild(divObj);
};
}
function removeDivDetail() {
var divObj = document.getElementById("divDetail");
if (!divObj) {
return;
}
document.body.removeChild(divObj);
}
window.onload = initEvent;
</script>
</head>
<body>
<div id="divOne" style="background-color: Fuchsia; width: 100px; height: 100px;" >
Hello Js 1!
<img src="1.jpg" width="50px" height="50px"/><img src="1.jpg" width="50px" height="50px"/>
</div>
<div id="divTwo" style="background-color: Aqua; width: 100px; height: 100px">
Welcome to 2!<img src="1.jpg" width="50px" height="50px"/>
</div>
<div id="divThree" style="background-color: Gray; width: 100px; height: 100px">
THIS IS 3
</div>
</body>
</html>
<!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>
<style type="text/css">
#small{
width:600px;
height:150px;
margin:auto;
margin-top:30px;}
#small td{
width:80px;
height:30px;
text-align:center;}
#big{
width:340px;
height:80px;
position:absolute;
left:470px;
top:68px;
display:none;
background-color:#CCC;}
#big td{
width:80px;
height:30px;
text-align:center;}
</style>
<script language="javascript">
function show(divId){
divId.style.display="block";
}
function hide(divId){
divId.style.display="none";
}
</script>
</head>
<body>
<div id="small">
<table width="600" border="1">
<tr>
<td>订单号</td>
<td onmouseover="show(big);" onmouseout="hide(big);">商品名</td>
<td onmouseover="show(big);" onmouseout="hide(big);">数量</td>
<td onmouseover="show(big);" onmouseout="hide(big);">单价</td>
<td onmouseover="show(big);" onmouseout="hide(big);">总价</td>
<td>卖家</td>
<td>买家</td>
</tr>
<tr>
<td>123</td>
<td>abc</td>
<td>456</td>
<td>1.1</td>
<td>9.0</td>
<td>ABC</td>
<td>DEF</td>
</tr>
</table>
</div>
<div id="big">
<table width="340" border="1">
<tr>
<td>abc</td>
<td>23</td>
<td>24</td>
<td>33344</td>
</tr>
<tr>
<td>cde</td>
<td>33</td>
<td>21</td>
<td>345</td>
</tr>
</table>
</div>
</body>
</html>
