Looking for a simple div css example_html/css_WEB-ITnose-HTML Tutorial-php.cn

Table of Contents

Reply to discussion (solution)

Home

Web Front-end

HTML Tutorial

Looking for a simple div css example_html/css_WEB-ITnose

Jun 24, 2016 pm 12:23 PM

div css mouseover javascript css

I want to make a small div with a large div above the small div. The large div is as wide as the small div and has a height higher than the small div. When the mouse is placed on the small div, the large div is displayed and covers the small div. Either implementation using javascript or css will work. The effect is achieved.

Reply to discussion (solution)

&lt;!DOCTYPE html&gt;&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;        &lt;title&gt;&lt;/title&gt;        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;        &lt;style&gt;            .xiao{                border: solid 1px ;                width: 100px;                height: 100px;            }            .xiao&gt;.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&gt;.da{                display: block;            }        &lt;/style&gt;    &lt;/head&gt;    &lt;body&gt;        &lt;div class=&quot;xiao&quot;&gt;            &lt;div class=&quot;da&quot;&gt;&lt;/div&gt;        &lt;/div&gt;    &lt;/body&gt;&lt;/html&gt;

Copy after login

Your avatar saved me a meal

&lt;!DOCTYPE html&gt;&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;        &lt;title&gt;&lt;/title&gt;         &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;         &lt;style&gt;              .xiao{                border: solid 1px ;                width: 100px;                height: 100px;            }              .xiao&gt;.da{                background-color: #ccc;                width: 100%;                height: 200px;                display: none;                         background-size: 100% 100%;            }              .xiao:hover&gt;.da{      display: block;       }          &lt;/style&gt;      &lt;/head&gt;       &lt;body&gt;           &lt;div class=&quot;xiao&quot;&gt;   fdsafaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa        		 &lt;div class=&quot;da&quot;&gt;fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff		 &lt;/div&gt;        	 &lt;/div&gt;    	 &lt;/body&gt;	 &lt;/html&gt;

Copy after login

The picture can be covered, but it cannot be covered if there is content inside. I want the big one to completely cover the small one, including the content and pictures inside the small one

&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt;    &lt;title&gt;&lt;/title&gt;    &lt;style type=&quot;text/css&quot;&gt;        .toopTip        {            background-color:Yellow;            border-style:solid;            border-width:1px;            border-color:Red;        }    &lt;/style&gt;   &lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;       /*            如果希望提示的div的左边界与上边界与显示的div重叠，那么需要删除文档头W3C标准            &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;             &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;                   */       function initEvent() {           var divArray = document.getElementsByTagName(&quot;div&quot;);           for (var i = 0; i &lt; divArray.length; i++) {               divArray[i].onmouseover = createDivDetailOne;               /*                 无法用原始的div绑定鼠标移走的事件,因为明细的div的宽度长度都要大于原始div，                 这样原始的div就被覆盖了，此时会自动触发onmouseout事件               */               //divArray[i].onmouseout = removeDivDetail;           }       }       function createDivDetailOne() {           //保证divDetail div的唯一性           var divDetail = document.getElementById(&quot;divDetail&quot;);           if(divDetail)           {               document.body.removeChild(divDetail);           }           divObj = document.createElement(&quot;div&quot;);           divObj.className = &quot;toopTip&quot;;           divObj.setAttribute(&quot;id&quot;, &quot;divDetail&quot;);           divObj.style.position = &quot;absolute&quot;;           divObj.style.width = &quot;200px&quot;;           divObj.style.height = &quot;100px&quot;;           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(&quot;divDetail&quot;).onmouseout = function() {               divObj = this;               if (!divObj) {                   return;               }               document.body.removeChild(divObj);           };       }       function removeDivDetail() {           var divObj = document.getElementById(&quot;divDetail&quot;);           if (!divObj) {               return;           }           document.body.removeChild(divObj);       }       window.onload = initEvent;    &lt;/script&gt;&lt;/head&gt;&lt;body&gt;    &lt;div id=&quot;divOne&quot; style=&quot;background-color: Fuchsia; width: 100px; height: 100px;&quot; &gt;        Hello  Js  1! &lt;img src=&quot;1.jpg&quot; width=&quot;50px&quot; height=&quot;50px&quot;/&gt;&lt;img src=&quot;1.jpg&quot; width=&quot;50px&quot; height=&quot;50px&quot;/&gt;    &lt;/div&gt;    &lt;div id=&quot;divTwo&quot; style=&quot;background-color: Aqua; width: 100px; height: 100px&quot;&gt;        Welcome to 2!&lt;img src=&quot;1.jpg&quot; width=&quot;50px&quot; height=&quot;50px&quot;/&gt;    &lt;/div&gt;    &lt;div id=&quot;divThree&quot; style=&quot;background-color: Gray; width: 100px; height: 100px&quot;&gt;        THIS IS  3    &lt;/div&gt;&lt;/body&gt;&lt;/html&gt;

Copy after login

This is the rendering I want

The first order has two products, 'Product 1' and 'Product 11'. Move the mouse to any cell from the product name to the total price. Display detailed product information for this order.

sinbas Your effect is quite good, but the content in the three divs is not covered! I used ASP to dynamically generate this form, so it's not easy to add things in it. I'll do more research.

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;&lt;title&gt;无标题文档&lt;/title&gt;&lt;style type=&quot;text/css&quot;&gt;#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;}&lt;/style&gt;&lt;script language=&quot;javascript&quot;&gt;function show(divId){	divId.style.display=&quot;block&quot;;	}function hide(divId){	divId.style.display=&quot;none&quot;;	}&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;div id=&quot;small&quot;&gt;&lt;table width=&quot;600&quot; border=&quot;1&quot;&gt;  &lt;tr&gt;    &lt;td&gt;订单号&lt;/td&gt;    &lt;td onmouseover=&quot;show(big);&quot; onmouseout=&quot;hide(big);&quot;&gt;商品名&lt;/td&gt;    &lt;td onmouseover=&quot;show(big);&quot; onmouseout=&quot;hide(big);&quot;&gt;数量&lt;/td&gt;    &lt;td onmouseover=&quot;show(big);&quot; onmouseout=&quot;hide(big);&quot;&gt;单价&lt;/td&gt;    &lt;td onmouseover=&quot;show(big);&quot; onmouseout=&quot;hide(big);&quot;&gt;总价&lt;/td&gt;    &lt;td&gt;卖家&lt;/td&gt;    &lt;td&gt;买家&lt;/td&gt;  &lt;/tr&gt;  &lt;tr&gt;    &lt;td&gt;123&lt;/td&gt;    &lt;td&gt;abc&lt;/td&gt;    &lt;td&gt;456&lt;/td&gt;    &lt;td&gt;1.1&lt;/td&gt;    &lt;td&gt;9.0&lt;/td&gt;    &lt;td&gt;ABC&lt;/td&gt;    &lt;td&gt;DEF&lt;/td&gt;  &lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;div id=&quot;big&quot;&gt;&lt;table width=&quot;340&quot; border=&quot;1&quot;&gt;  &lt;tr&gt;    &lt;td&gt;abc&lt;/td&gt;    &lt;td&gt;23&lt;/td&gt;    &lt;td&gt;24&lt;/td&gt;    &lt;td&gt;33344&lt;/td&gt;  &lt;/tr&gt;  &lt;tr&gt;    &lt;td&gt;cde&lt;/td&gt;    &lt;td&gt;33&lt;/td&gt;    &lt;td&gt;21&lt;/td&gt;    &lt;td&gt;345&lt;/td&gt;  &lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;	&lt;/body&gt;&lt;/html&gt;

Copy after login

lin9118 Friend did not understand what I meant. What I meant was that the mouse was placed on the order, and then the content expanded, not that the mouse was placed on the title.

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; &gt;&lt;head runat=&quot;server&quot;&gt;&lt;title&gt;ToolTip&lt;/title&gt;&lt;/head&gt;&lt;script language=&quot;javascript&quot;&gt;function show(qusetion, answer, email, divfId,divid){	document.getElementById(&quot;td1&quot;).innerText=&quot;问题：&quot; + qusetion;	document.getElementById(&quot;td2&quot;).innerText=&quot;答案：&quot; + answer;	document.getElementById(&quot;td3&quot;).innerText=&quot;邮箱：&quot; + 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=&quot;block&quot;;}function Hide(divid){    var div1=document.getElementById(divid);	div1.style.display=&quot;none&quot;;}&lt;/script&gt;&lt;style&gt;.banbu1,.banbu1{    width:400px;   z-index:1;	background-color:#CCCCCC;	margin-top:0	}.wai{position:relative;width:400px}&lt;/style&gt;&lt;body&gt;&lt;div class=&quot;wai&quot; id=&quot;div6&quot;&gt;&lt;div class=&quot;banbu1&quot; id=&quot;d4&quot; onmousemove=&quot;show('问题一','答案一','邮箱一','d4','div4');&quot; onmouseout=&quot;Hide('div4');&quot;&gt;Hi30mnnnn&lt;div id=&quot;div4&quot; style=&quot;display:none; position:absolute;border:1px solid #FF6666;z-index:2;&quot;&gt;&lt;table border=&quot;0&quot; cellpadding=&quot;0&quot; bgcolor=&quot;#000&quot; width=&quot;400px&quot; height=&quot;100px&quot;&gt;&lt;tr&gt;&lt;td width=&quot;180px&quot; style=&quot;color:white&quot;&gt;信息&lt;hr /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td id=&quot;td1&quot; height=&quot;25px&quot; style=&quot;color:White&quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td id=&quot;td2&quot; height=&quot;25px&quot; style=&quot;color:White&quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td id=&quot;td3&quot; height=&quot;25px&quot; style=&quot;color:White&quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;banbu1&quot; id=&quot;d2&quot; onmouseout=&quot;Hide();&quot;&gt;Hi&lt;/div&gt;&lt;div class=&quot;banbu1&quot; id=&quot;d2&quot; onmouseout=&quot;Hide();&quot;&gt;Hi&lt;/div&gt;&lt;div class=&quot;banbu1&quot; id=&quot;d2&quot; onmouseout=&quot;Hide();&quot;&gt;Hi&lt;/div&gt;&lt;div class=&quot;banbu1&quot; id=&quot;d2&quot; onmouseout=&quot;Hide();&quot;&gt;Hi&lt;/div&gt;&lt;div class=&quot;banbu1&quot; id=&quot;d2&quot; onmouseout=&quot;Hide();&quot;&gt;Hi&lt;/div&gt;&lt;div class=&quot;banbu1&quot; id=&quot;d2&quot; onmouseout=&quot;Hide();&quot;&gt;Hi&lt;/div&gt;&lt;div class=&quot;banbu1&quot; id=&quot;d2&quot; onmouseout=&quot;Hide();&quot;&gt;Hi&lt;/div&gt;&lt;div class=&quot;banbu1&quot; id=&quot;d2&quot; onmouseout=&quot;Hide();&quot;&gt;Hi&lt;/div&gt;&lt;div class=&quot;banbu1&quot; id=&quot;d2&quot; onmouseout=&quot;Hide();&quot;&gt;Hi&lt;/div&gt;&lt;div class=&quot;banbu1&quot; id=&quot;d2&quot; onmouseout=&quot;Hide();&quot;&gt;Hi&lt;/div&gt;&lt;div class=&quot;banbu1&quot; id=&quot;d2&quot; onmouseout=&quot;Hide();&quot;&gt;Hi&lt;/div&gt;&lt;div class=&quot;banbu1&quot; id=&quot;d2&quot; onmouseout=&quot;Hide();&quot;&gt;Hi&lt;/div&gt;&lt;div class=&quot;banbu1&quot; id=&quot;d2&quot; onmouseout=&quot;Hide();&quot;&gt;Hi&lt;/div&gt;&lt;div class=&quot;banbu1&quot; id=&quot;d2&quot; onmouseout=&quot;Hide();&quot;&gt;Hi&lt;/div&gt;&lt;div class=&quot;banbu1&quot; id=&quot;d2&quot; onmouseout=&quot;Hide();&quot;&gt;Hi&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;

Copy after login

Finally got it, I simplified it

Posted, thank you all!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn