実現したいこと
CSSでヘルプマークを作成し、
マウスオーバーでヘルプテキストを表示できるようにしたのですが、
非表示にしてあるヘルプテキストをマウスオーバーした際にも
ヘルプテキストが表示されてしまいます。
ヘルプマークにマウスオーバーしたときにだけヘルプテキストを
表示できるようにしたいです。
該当のソースコード
HTML
1<span class="help-mark"><span class="help-text">マウスオーバーで表示されるテキスト</span></span>
CSS
1.help-mark:before{ 2 content: "?"; 3 display: inline-block; 4 width: 20px; 5 height: 20px; 6 border-radius: 50%; 7 text-align: center; 8 line-height: 1.4; 9 color: darkorange; 10 border: solid; 11 font-weight: bold; 12 cursor: pointer; 13} 14.help-text { 15 position: relative; 16 top: -1.4px; 17 left: 0%; 18 padding: 0em 1em; 19 border-radius: 3px; 20 color: darkred; 21 background-color: darkorange; 22 font-weight: bold; 23 visibility: hidden; /* 非表示 */ 24 opacity: 0; /* 不透明度を0%に */ 25 z-index: 1; /* 重なり順序(値が大きい方が手前) */ 26 pointer-events: none; 27} 28.help-mark:hover .help-text{ 29 left: 3%; 30 visibility: visible; /* 表示 */ 31 opacity: 1; /* 不透明度を100%に */ 32 transition: 1s all; /* マウスオーバー時のアニメーション速度 */ 33}
試したこと
pointer-events: none; を記載しましたが、
help-text 内の文字列が存在しているところに
マウスオーバーするとヘルプテキストが表示されてしまいます。
また、display: none; では動きましたが、
その場合、アニメーションが動かない状態となってしまいます。

回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2023/05/22 13:32 編集
2023/05/22 16:40
2023/05/22 22:45