简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Titre réécrit en : utilisez z-index pour afficher le texte en survol avec CSS, provoquant le déplacement de div
P粉826283529
P粉826283529 2023-09-03 20:17:48
0
1
380
<p>Lorsque je survole le premier div pour afficher le texte intégral, la position du deuxième div change pour qu'elle soit derrière le premier div. Je veux que le deuxième div reste en place et que le texte du premier div le couvre. </p> <p><strong>Démo : </strong>https://codepen.io/adivity/pen/OJEzoPm</p> <pre class="brush:php;toolbar:false;"><html> <corps> <div class="conteneur"> <div>1) C'est le titre complet que je souhaite afficher. C'est très long et couvrira complètement la prochaine division. </div> <div>2) C'est le titre complet que je souhaite afficher. C'est très long et couvrira complètement la prochaine division. </div> <div>3) C'est le titre complet que je souhaite afficher. C'est très long et couvrira complètement la prochaine division. </div> </div> </corps> </html></pre> <pre class="brush:php;toolbar:false;">.container { largeur maximale : 100 px ; marge : 0 automatique ; } .conteneur div { hauteur : 80px ; couleur de fond : gris ; } .conteneur div { espace blanc : nowrap ; débordement caché; débordement de texte : points de suspension ; } .container div: survol { débordement : visible ; espace blanc : normal ; indice z : 2 ; largeur maximale : 100 px ; }</pre></p>
P粉826283529
P粉826283529

répondre à tous(1)
P粉759451255
P粉7594512552023-09-04 13:51:03 1 plancher

De .container div:hover 中移除 position: absolute J'ai résolu le problème pour moi. Est-ce ce que vous recherchez? 

.container div:hover {
  overflow: visible;
  white-space: normal;
  z-index: 2;
  position: absolute; <---移除这个
  max-width: 100px;
}
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！