纯CSS写的弹出层问题_html/css_WEB-ITnose
我想要用图片作为一个链接，当鼠标移到图片上的时候就在图片的下面弹出相应的层。类似于淘宝上旺旺客服模块，当鼠标移到旺旺图标上的时候，就弹出底下对应的旺旺列表！现在想要用CSS去写，不用JS代码，不知道怎么去实现，有那位知道的高手们给我一点思路，最好能给个例子把！感激不尽！谢谢！
回复讨论(解决方案)
都是js写的
不会把，好像可以用CSS的隐藏来实现的，但是我不知道具体怎么操作！
纯css我觉得不可能，反正我是没写过，也没见过。
我的资源里有纯css+div弹出菜单，可供你做参考。
不会把，好像可以用CSS的隐藏来实现的，但是我不知道具体怎么操作！
是可以这样，使用overflow:hidden和overflow:auto去切换隐藏和显示。
代码怎么实现的呢！
实现是可以实现，不过这样就搞大了。、
你想css是标签的css，各标签有各自的css，你不可能在主菜单上的css能够控制子菜单的样式吧？对不？
只有通过其它方式实现，比如子菜单分为两部份，上面部份覆盖主菜单且透明，下面一部份是子菜单功能。开始时这层的调试是主菜单高度一样，当鼠标移到上面时，改变层的高度为主菜单+子菜单的高度。
而且你这个层必须是绝对定位的，不然子菜单显示出来会把菜单下面的内容向下挤。这就很难看了。
代码就自己实现吧。
还是用js来实现吧，没有必要把简单的问题复杂化。
怎么可能用css写出来啊？？？刚写的一个jquery的，看下吧
</script> <script type="text/javascript"> $(document).ready(function(){ $(".flipa").click(function(){ $(".panela").slideToggle("slow"); }); }); $(document).ready(function(){ $(".flipb").click(function(){ $(".panelb").slideToggle("slow"); }); }); $(document).ready(function(){ $(".flipc").click(function(){ $(".panelc").slideToggle("slow"); }); }); $(document).ready(function(){ $(".flipd").click(function(){ $(".paneld").slideToggle("slow"); }); }); </script> div.panela,.panelb,.panelc,.paneld,p.flipa,p.flipb,p.flipc,p.flipd { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panela,.panelb,.panelc,.paneld { width:220px; height:120px; display:none; } p.flipa,p.flipb,p.flipc,p.flipd { width:220px; height:20px; }</div> <p>请输入密码：</p> <input type="password" id="pwd" /><p /> <div class="panela"> <p><a href="">百度一下</a></p> <p><a href="">百度一下</a></p> </div> <p class="flipa" id="a">请点A</p> <div class="panelb"> <p><a href="">百度一下</a></p> <p><a href="">百度一下</a></p> </div> <p class="flipb" id="b">请点B</p> <div class="panelc"> <p><a href="">百度一下</a></p> <p><a href="">百度一下</a></p> </div> <p class="flipc" id="c">请点C</p> <div class="paneld"> <p><a href="">百度一下</a></p> <p><a href="">百度一下</a></p> </div> <p class="flipd" id="d">请点D</p>
我也是新手啊！ 写得复杂了！
谢谢了！相互学习！
怎么可能用css写出来啊？？？刚写的一个jquery的，看下吧
JScript code
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.
Article chaud
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)
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; 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; 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
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.
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
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.
Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive?
Mar 20, 2025 pm 05:56 PM
L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Mar 20, 2025 pm 06:05 PM
L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.
