擬似要素をツールチップとして表示はできるのですが、
擬似要素をホバーして、ツールチップを表示することはできるのでしょうか?
今模索しているソースはこんな感じです。。。
HTML
1<div> 2 <span>たいとる</span> 3 <span id="disp-tip">ツールチップ内容</span> 4</div>
css
1/* 擬似要素でアイコンを表示 */ 2div span:nth-child(1):after { 3 content: ''; 4 background-image: url(/img/test.png); 5 background-repeat: no-repeat; 6 background-size: 22px; 7 maxWidth: 450; 8 width: 35px; 9 height: 22px; 10 display:inline-block; 11} 12/* ツールチップ部非表示 */ 13span#disp-tip { 14 display: none; 15} 16/* 擬似要素ホバーでツーチップ表示 */ 17div span:nth-child(1):hover:after ~ span#disp-tip { 18 display: block; 19}
一つ前の質問の方に回答させていただきました。もし追加情報があれば、そちらに記載いただけると助かります。
https://teratail.com/questions/129037 この質問と内容が同じです。teratailは質問内容の編集ができるので、変更がある場合は新しい質問をするのではなく編集してください。また、こちらを削除されるよう運営に連絡されることをお勧めします。https://teratail.com/contact/input
回答1件
あなたの回答
tips
プレビュー