求一个简单的div+css示例_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

집

웹 프론트엔드

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