単純な div+css を探しています example_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

単純な div+css を探しています example_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 を探しています example_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 を探しています example_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 を探しています example_html/css_WEB-ITnose" >    </div>    <div id="divThree" style="background-color: Gray; width: 100px; height: 100px">        THIS IS  3    </div></body></html>

これが私が望むレンダリングです

最初の注文には 2 つの製品があります、「Product One」と「Product One One」のマウスの動き商品名から合計金額までは、ご注文の商品詳細情報が表示されます。

sinbas エフェクトは非常に優れていますが、3 つの 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 までご連絡ください。

＆lt; Progress＆gt;の目的は何ですか要素？Mar 21, 2025 pm 12:34 PM

この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合

＆lt; datalist＆gt;の目的は何ですか要素？Mar 21, 2025 pm 12:33 PM

この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

＆lt; meter＆gt;の目的は何ですか要素？Mar 21, 2025 pm 12:35 PM

この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex

ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

HTML5＆lt; time＆gt;を使用するにはどうすればよいですか日付と時刻を意味的に表す要素？Mar 12, 2025 pm 04:05 PM

この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

＆lt; iframe＆gt;の目的は何ですかタグ？使用する際のセキュリティ上の考慮事項は何ですか？Mar 20, 2025 pm 06:05 PM

この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

See all articles

ホットAIツール

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。