CSS 带有 z-index 的 hover 上的文本显示导致 div 移动
[英]CSS text reveal on hover with z-index is causing divs to move
问题描述
When I hover over my first div to reveal the full text, the second div's position changes to go behind that first div.
当我 hover 在我的第一个 div 上显示全文时，第二个 div 的 position 更改为第一个 div 后面的 go。 I need the second div to remain where it is, with the text from the first div overlapping it.我需要第二个 div 保留在原处，第一个 div 的文本与它重叠。
Demo: https://codepen.io/adivity/pen/OJEzoPm演示： 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;
}
3 个解决方案
解决方案1
1 2022-11-21 04:13:15
Removing position: absolute from .container div:hover fixed the issue for me.从.container div:hover中删除position: absolute为我解决了这个问题。 Is that what you were looking for?那是你要找的吗？
.container div:hover {
overflow: visible;
white-space: normal;
z-index: 2;
position: absolute; <---remove this
max-width: 100px;
}
解决方案2
0 2022-11-21 04:14:59
Here you can try this logic:在这里你可以试试这个逻辑：
.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>
解决方案3
0 2022-11-21 04:18:13
It is actually overlapping but you'll have to remove the background color of the divs to see the overlap.它实际上是重叠的，但您必须删除 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>
If you want the divs to stay at their own positions, just remove the "position: absolute" rule fron the css.如果您希望 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.