제목 재작성: Z-색인을 사용하여 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>
<본문>
<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>
