當我將滑鼠懸停在第一個 div 上以顯示全文時，第二個 div 的位置會更改為位于第一個 div 之后。我需要第二個 div 保留在原處，第一個 div 的文本與它重疊。
演示： https ://codepen.io/adivity/pen/OJEzoPm
<html>
<body>
<div class="container">
<div>1) This is the full title that I want to be revealed. That is super duper long and totally will overlap the next div.
</div>
<div>2) This is the full title that I want to be revealed. That is super duper long and totally will overlap the next div.
</div>
<div>3) This is the full title that I want to be revealed. That is super duper long and totally will overlap the next div.
</div>
</div>
</body>
</html>
.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;
}
uj5u.com熱心網友回復：
position: absolute從中洗掉.container div:hover為我解決了這個問題。那是你要找的嗎？
.container div:hover {
overflow: visible;
white-space: normal;
z-index: 2;
position: absolute; <---remove this
max-width: 100px;
}
uj5u.com熱心網友回復：
在這里你可以試試這個邏輯：
.container {
max-width: 100px;
margin: 0 auto;
}
.container div {
height: 100px;
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;
}<html>
<body>
<div class="container">
<div>1) This is the full title that I want to be revealed
</div>
<div>2) This is the full title that I want to be revealed
</div>
<div>3) This is the full title that I want to be revealed
</div>
</div>
</body>
</html>uj5u.com熱心網友回復：
它實際上是重疊的，但您必須洗掉 div 的背景顏色才能看到重疊。
.container {
max-width: 100px;
margin: 0 auto;
}
.container div {
height: 100px;
/* background-color: grey; */
}
.container div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.container div:hover {
overflow: visible;
white-space: normal;
z-index: 2;
position: absolute;
max-width: 100px;
}<html>
<body>
<div class="container">
<div>1) This is the full title that I want to be revealed
</div>
<div>2) This is the full title that I want to be revealed
</div>
<div>3) This is the full title that I want to be revealed
</div>
</div>
</body>
</html>如果您希望 div 保持在自己的位置，只需從 css 中洗掉“position: absolute”規則。
.container {
max-width: 100px;
margin: 0 auto;
}
.container div {
height: 100px;
/* background-color: grey; */
}
.container div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.container div:hover {
overflow: visible;
white-space: normal;
z-index: 2;
/* position: absolute; */
max-width: 100px;
}<html>
<body>
<div class="container">
<div>1) This is the full title that I want to be revealed
</div>
<div>2) This is the full title that I want to be revealed
</div>
<div>3) This is the full title that I want to be revealed
</div>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/537399.html
標籤：网页格式CSSz-索引