求一个简单的div+css示例_html/css_WEB-ITnose-html教程-PHP中文网

回复讨论(解决方案)

首页

web前端

html教程

求一个简单的div+css示例_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:23 PM

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="/static/imghw/default1.png"  data-src="1.jpg"  class="lazy"      style="max-width:90%" height="50px"/ alt="求一个简单的div+css示例_html/css_WEB-ITnose" ><img  src="/static/imghw/default1.png"  data-src="1.jpg"  class="lazy"      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="/static/imghw/default1.png"  data-src="1.jpg"  class="lazy"      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>

登录后复制

终于搞定了，我做了个简化

结贴了，谢谢各位！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn