CSSで　pointer-events: none;　を記載しても、動いてしまうのを防ぎたい。

実現したいこと

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件

ベストアンサー

下記のCSSを追加してみてください。

CSS
1.help-mark {
2   pointer-events: none;
3}
4.help-mark:before{
5    pointer-events: auto;
6}

HTML変更可なら、下記の方法でも。

HTML
1<span class="help-mark"></span><span class="help-text">マウスオーバーで表示されるテキスト</span>

CSS
1/* .help-mark:hover .help-text{ ←これを下記に修正 */
2.help-mark:hover + .help-text{
3    left: 3%;
4    visibility: visible; /* 表示 */
5    opacity: 1; /* 不透明度を100％に */
6    transition: 1s all; /* マウスオーバー時のアニメーション速度 */    
7}

追記

コメントより

もう一点、ヘルプマークの後ろに非表示の
<span class="help-text">マウスオーバーで表示されるテキスト</span>
がある状態ですが、ヘルプマークの後ろに、ヘルプテキスト文字数分空きができてしまってます。
マークの前、後ろにも続けて文章を入力できるようにしたいのですが可能でしょうか。

.help-text を絶対配置すればいいでしょう。下記にサンプルを作成しましたの参考に。

投稿2023/05/21 16:06

総合スコア33715

2023/05/22 13:32 編集

ありがとうございます。完璧に動きました！　ただ、もう一点、ヘルプマークの後ろに非表示の <span class="help-text">マウスオーバーで表示されるテキスト</span> がある状態ですが、ヘルプマークの後ろに、ヘルプテキスト文字数分空きができてしまってます。マークの前、後ろにも続けて文章を入力できるようにしたいのですが可能でしょうか。ヘルプテキストに z-index: 1; /* 重なり順序（値が大きい方が手前） */ を記入しているのですが、これでは動かないでしょうか？