タイトルを次のように書き換えました: CSS でホバー時に z-index を使用してテキストを表示し、div を移動させます
<p>最初の div にカーソルを合わせて全文を表示すると、2 番目の div の位置が変更され、最初の div の後ろになります。 2 番目の div はそのままにして、最初の div のテキストでそれをカバーしたいと考えています。 </p>
<p><strong>デモ: </strong>https://codepen.io/adivity/pen/OJEzoPm</p>
<pre class="brush:php;toolbar:false;"><html>
<本体>
<div>1) これは表示したい完全なタイトルです。非常に長いので、次の div で完全にカバーされます。
</div>
<div>2) これは表示したい完全なタイトルです。非常に長いので、次の div で完全にカバーされます。
</div>
<div>3) これは表示したい完全なタイトルです。非常に長いので、次の div で完全にカバーされます。
</div>
</div>
</ボディ>
</html></pre>
<pre class="brush:php;toolbar:false;">.container {
最大幅: 100ピクセル;
マージン: 0 自動;
}
.container div {
高さ: 80ピクセル;
背景色: グレー;
}
.container div {
ホワイトスペース: ナラップ;
オーバーフロー: 非表示;
テキストオーバーフロー: 省略記号;
}
.container div:hover {
オーバーフロー: 表示;
ホワイトスペース: 通常;
z インデックス: 2;
最大幅: 100ピクセル;
}</pre></p>
全員に返信(1)返信します
P粉7594512552023-09-04 13:51:03
position:Absolute を .container div:hover から削除すると、問題が解決しました。これがあなたが探しているものですか?
返事
0