제목 재작성: Z-색인을 사용하여 CSS로 마우스를 올리면 텍스트를 표시하여 div가 이동하게 함
P粉826283529
2023-09-03 20:17:48
<p>전체 텍스트를 표시하기 위해 첫 번째 div 위로 마우스를 가져가면 두 번째 div의 위치가 첫 번째 div 뒤에 오도록 변경됩니다. 두 번째 div는 그대로 유지하고 첫 번째 div의 텍스트로 이를 덮기를 원합니다. </p>
<p><strong>데모: </strong>https://codepen.io/adivity/pen/OJEzoPm</p>
<pre class="brush:php;toolbar:false;"><html>
<본문>
<div class="컨테이너">
<div>1) 표시하려는 전체 제목입니다. 매우 길며 다음 div를 완전히 포함합니다.
</div>
<div>2) 표시하고 싶은 전체 제목입니다. 매우 길며 다음 div를 완전히 포함합니다.
</div>
<div>3) 표시하고 싶은 전체 제목입니다. 매우 길며 다음 div를 완전히 포함합니다.
</div>
</div>
</body>
</html></pre>
<pre class="brush:php;toolbar:false;">.container {
최대 너비: 100px;
여백: 0 자동;
}
.컨테이너 div {
높이: 80px;
배경색: 회색;
}
.컨테이너 div {
공백: nowrap;
오버플로: 숨김;
텍스트 오버플로: 줄임표;
}
.container div:hover {
오버플로: 표시됨;
공백: 정상;
Z-인덱스: 2;
최대 너비: 100px;
}</pre></p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
From
으아악.container div:hover中移除position: absolute문제를 해결해 주었습니다. 이것이 당신이 찾고 있는 것입니까?