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

Question

実現したいこと

CSSでヘルプマークを作成し、
マウスオーバーでヘルプテキストを表示できるようにしたのですが、
非表示にしてあるヘルプテキストをマウスオーバーした際にも
ヘルプテキストが表示されてしまいます。

ヘルプマークにマウスオーバーしたときにだけヘルプテキストを
表示できるようにしたいです。

該当のソースコード

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

.help-mark:before{
    content: "?";
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    line-height: 1.4;
    color: darkorange;
    border: solid;
    font-weight: bold;
    cursor: pointer;
}
.help-text {
    position: relative;
    top: -1.4px;
    left: 0%;
    padding: 0em 1em;
    border-radius: 3px;
    color: darkred;
    background-color: darkorange;
    font-weight: bold;
    visibility: hidden; /* 非表示 */
    opacity: 0; /* 不透明度を0％に */
    z-index: 1; /* 重なり順序（値が大きい方が手前） */
    pointer-events: none;
}
.help-mark:hover .help-text{
    left: 3%;
    visibility: visible; /* 表示 */
    opacity: 1; /* 不透明度を100％に */
    transition: 1s all; /* マウスオーバー時のアニメーション速度 */    
}

試したこと

pointer-events: none;　を記載しましたが、
help-text 内の文字列が存在しているところに
マウスオーバーするとヘルプテキストが表示されてしまいます。

また、display: none; では動きましたが、
その場合、アニメーションが動かない状態となってしまいます。

Answer 1

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

.help-mark {
   pointer-events: none;
}
.help-mark:before{
    pointer-events: auto;
}

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

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

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

追記

コメントより

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

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

CodePen サンプル

Comments

[RisingHisa]

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

[hatena19]

回答に追記しましたのでご参考に。

[RisingHisa]

ご丁寧にありがとうございました。目的を完全に達成しました。まだCSSは不慣れなため、位置関係がよくわかっていないのですが、理解を深めることができました。