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

Table des matières

回复讨论(解决方案)

Maison

interface Web

tutoriel 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>

Copier après la connexion

你的头像节省了我一顿饭钱

<!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>

Copier après la connexion

图片是能盖住，但是里面有内容就盖不住了，我要大的完全盖住小的，包括小的里面的内容还有图片

<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>

Copier après la connexion

这个是我想要的效果图

第一个定单有两个商品，‘商品一’和‘商品一一’鼠标移动到商品名至总价任意一个单元格显示该定单的详细商品信息。

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>

Copier après la connexion

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>

Copier après la connexion

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

结贴了，谢谢各位！

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Repo: Comment relancer ses coéquipiers

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Comment obtenir des graines géantes

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Combien de temps faut-il pour battre Split Fiction?

3 Il y a quelques semaines By DDD

R.E.P.O. Enregistrer l'emplacement du fichier: où est-il et comment le protéger?

3 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7343

Tutoriel Java

1627

Tutoriel CakePHP

1352

Tutoriel Laravel

1265

Tutoriel PHP

1214

Afficher plus

Related knowledge

Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version? Mar 04, 2025 pm 12:32 PM

Le cache de mise à jour de la page Web du compte officiel, cette chose est simple et simple, et elle est suffisamment compliquée pour en boire un pot. Vous avez travaillé dur pour mettre à jour l'article officiel du compte, mais l'utilisateur a toujours ouvert l'ancienne version. Dans cet article, jetons un coup d'œil aux rebondissements derrière cela et comment résoudre ce problème gracieusement. Après l'avoir lu, vous pouvez facilement faire face à divers problèmes de mise en cache, permettant à vos utilisateurs de toujours ressentir le contenu le plus frais. Parlons d'abord des bases. Pour le dire franchement, afin d'améliorer la vitesse d'accès, le navigateur ou le serveur stocke des ressources statiques (telles que des images, CSS, JS) ou du contenu de la page. La prochaine fois que vous y accédez, vous pouvez le récupérer directement à partir du cache sans avoir à le télécharger à nouveau, et il est naturellement rapide. Mais cette chose est aussi une épée à double tranchant. La nouvelle version est en ligne,

Comment ajouter efficacement les effets de course aux images PNG sur les pages Web? Mar 04, 2025 pm 02:39 PM

Cet article démontre un ajout de bordure PNG efficace aux pages Web à l'aide de CSS. Il soutient que CSS offre des performances supérieures par rapport à JavaScript ou à des bibliothèques, détaillant comment ajuster la largeur, le style et la couleur des bordures pour un effet subtil ou proéminent

Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Mar 17, 2025 pm 12:27 PM

L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.

Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Mar 17, 2025 pm 12:20 PM

L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.

Quel est le but du & lt; datalist & gt; élément? Mar 21, 2025 pm 12:33 PM

L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159

Quel est le but du & lt; Progress & gt; élément? Mar 21, 2025 pm 12:34 PM

L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati

Quel est le but du & lt; mètre & gt; élément? Mar 21, 2025 pm 12:35 PM

L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex

Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement? Mar 12, 2025 pm 04:05 PM

Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit

See all articles