div+css 鼠档悬停 javascript css
我想做一个小的div ，小div上面有一个大的div，大的div跟小的div一样宽，高度比小的高，鼠标放在小div上大div显示，覆盖小div。用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>
<!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-size: 100% 100%; } .xiao:hover>.da{ display: block; } </style> </head> <body> <div class="xiao"> fdsafaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <div class="da">fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff </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" style="max-width:90%" height="50px"/ alt="求一个简单的div+css示例_html/css_WEB-ITnose" ><img src="1.jpg" style="max-width:90%" height="50px"/ alt="求一个简单的div+css示例_html/css_WEB-ITnose" > </div> <div id="divTwo" style="background-color: Aqua; width: 100px; height: 100px"> Welcome to 2!<img src="1.jpg" style="max-width:90%" height="50px"/ alt="求一个简单的div+css示例_html/css_WEB-ITnose" > </div> <div id="divThree" style="background-color: Gray; width: 100px; height: 100px"> THIS IS 3 </div></body></html>
这个是我想要的效果图
第一个定单有两个商品，‘商品一’和‘商品一一’鼠标移动到商品名至总价任意一个单元格显示该定单的详细商品信息。
sinbas 你这个效果倒是挺好，但是三个div中的内容没有盖住啊！我是用asp动态生成这个表单，里面不太好加东西啊。我再研究研究。
<!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>lin9118 朋友没有理解我的意思，我的意思是鼠标放到订单上，然后内容扩大，不是鼠标放到标题上。
<!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 runat="server"><title>ToolTip</title></head><script language="javascript">function show(qusetion, answer, email, divfId,divid){ document.getElementById("td1").innerText="问题：" + qusetion; document.getElementById("td2").innerText="答案：" + answer; document.getElementById("td3").innerText="邮箱：" + email; var divfather=document.getElementById(divfId); var divSon=document.getElementById(divid); var x=divfather.offsetLeft; var y=divfather.offsetTop; divSon.style.position='absolute'; divSon.style.left = x; divSon.style.top = y; divSon.style.display="block";}function Hide(divid){ var div1=document.getElementById(divid); div1.style.display="none";}</script><style>.banbu1,.banbu1{ width:400px; z-index:1; background-color:#CCCCCC; margin-top:0 }.wai{position:relative;width:400px}</style><body><div class="wai" id="div6"><div class="banbu1" id="d4" onmousemove="show('问题一','答案一','邮箱一','d4','div4');" onmouseout="Hide('div4');">Hi30mnnnn<div id="div4" style="display:none; position:absolute;border:1px solid #FF6666;z-index:2;"><table border="0" cellpadding="0" bgcolor="#000" width="400px" height="100px"><tr><td width="180px" style="color:white">信息<hr /></td></tr><tr><td id="td1" height="25px" style="color:White"></td></tr><tr><td id="td2" height="25px" style="color:White"></td></tr><tr><td id="td3" height="25px" style="color:White"></td></tr></table></div></div></div><div class="banbu1" id="d2" onmouseout="Hide();">Hi</div><div class="banbu1" id="d2" onmouseout="Hide();">Hi</div><div class="banbu1" id="d2" onmouseout="Hide();">Hi</div><div class="banbu1" id="d2" onmouseout="Hide();">Hi</div><div class="banbu1" id="d2" onmouseout="Hide();">Hi</div><div class="banbu1" id="d2" onmouseout="Hide();">Hi</div><div class="banbu1" id="d2" onmouseout="Hide();">Hi</div><div class="banbu1" id="d2" onmouseout="Hide();">Hi</div><div class="banbu1" id="d2" onmouseout="Hide();">Hi</div><div class="banbu1" id="d2" onmouseout="Hide();">Hi</div><div class="banbu1" id="d2" onmouseout="Hide();">Hi</div><div class="banbu1" id="d2" onmouseout="Hide();">Hi</div><div class="banbu1" id="d2" onmouseout="Hide();">Hi</div><div class="banbu1" id="d2" onmouseout="Hide();">Hi</div><div class="banbu1" id="d2" onmouseout="Hide();">Hi</div></body></html>结贴了，谢谢各位！
