標題重寫為:使用z-index在CSS懸停時展示文本,導致div移動
P粉826283529
P粉826283529 2023-09-03 20:17:48
0
1
382
<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粉826283529
P粉826283529

全部回覆(1)
P粉759451255

.container div:hover 移除 position: absolute 對我來說解決了問題。這是你要找的嗎?

.container div:hover {
  overflow: visible;
  white-space: normal;
  z-index: 2;
  position: absolute; <---移除这个
  max-width: 100px;
}
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!