首页  >  问答  >  正文

标题重写为:使用z-index在CSS悬停时展示文本,导致div移动

<p>当我悬停在第一个div上以显示完整的文本时,第二个div的位置会改变,以使其位于第一个div的后面。我希望第二个div保持原位,第一个div的文本覆盖它。</p> <p><strong>演示:</strong>https://codepen.io/adivity/pen/OJEzoPm</p> <pre class="brush:php;toolbar:false;"><html> <body> <div class="container"> <div>1)这是我想要显示的完整标题。它非常长,完全会覆盖下一个div。 </div> <div>2)这是我想要显示的完整标题。它非常长,完全会覆盖下一个div。 </div> <div>3)这是我想要显示的完整标题。它非常长,完全会覆盖下一个div。 </div> </div> </body> </html></pre> <pre class="brush:php;toolbar:false;">.container { max-width: 100px; margin: 0 auto; } .container div { height: 80px; background-color: grey; } .container div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .container div:hover { overflow: visible; white-space: normal; z-index: 2; max-width: 100px; }</pre></p>
P粉826283529P粉826283529411 天前377

全部回复(1)我来回复

  • P粉759451255

    P粉7594512552023-09-04 13:51:03

    .container div:hover 中移除 position: absolute 对我来说解决了问题。这是你要找的吗?

    .container div:hover {
      overflow: visible;
      white-space: normal;
      z-index: 2;
      position: absolute; <---移除这个
      max-width: 100px;
    }

    回复
    0
  • 取消回复