首頁  >  問答  >  主體

標題重寫為:使用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 天前375

全部回覆(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
  • 取消回覆