【HTML/CSS】要素外をホバーしてもアニメーションが適用されてしまう

Question

cssのtransitionプロパティを用いて、
要素("ここをホバー")をホバーした時のみツールチップを表示させたいのですが、要素外をホバーした場合もツールチップが表示されてしまいます。

コード及び挙動を載せておきます。
原因わかる方がいらっしゃいましたらご教示いただけると幸いです。

<div class="tooltip_wrap">
  <div class="clickmsg"><a href="#">ここをホバー</a>
    <ul class="tooltip">
      <li><a href="">リンク1</a></li>
      <li><a href="#">リンク2</a></li>
    </ul>
  </div>
</div>

.tooltip {
  background: gray;
  opacity: 0;
  padding: 1.2rem 2rem;
  position: absolute;
  right: 0rem;
  text-align: left;
  top: 0rem;
  transform: translate3d(0, -10px, 0);
  transition: all 0.15s ease-in-out;
  width: 180px;
  z-index: 100;
}

.clickmsg:hover .tooltip {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

Answer 1

`.clickmsg がdiv要素で、ブロックレベル要素になるので親要素の幅一杯に広がるのが原因ですね。
下記のように背景色を設定すれば確認できます。

.clickmsg {
  background-color: pink;
}

display: inline-block;でインラインブロック要素に変換すれば中身の幅と同じになりますので、要素("ここをホバー")をホバーした時のみ反応するようになります。

.clickmsg {
  display: inline-block; 
}

追記

下記のようなことがご希望の動作でしょうか。

.tooltip {
  background: gray;
  opacity: 0;
  padding: 1.2rem 2rem;
  position: absolute;
  right: 0rem;
  text-align: left;
  top: 0rem;
  transform: translate3d(0, -10px, 0);
  transition: all 0.15s ease-in-out;
  width: 180px;
  z-index: 100;
  pointer-events: none; /* ホバー無効 */
}
.clickmsg {
  background-color: pink; /* 範囲の確認用 */
}
.clickmsg:hover .tooltip,
.tooltip:hover {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto; /* ホバー有効 */
}

CodePenサンプル

Comments

[Jake5]

ご回答ありがとうございます。
上記試してみましたが、挙動は変わらずでした...
(画面右の謎の空白部分をホバーすると表示されてしまう)
inline-block要素になったのは確認済です。

うーむ...

[hatena19]

やりたいことがよく分かりませんが、とりあえずサンプルを回答に追記しましたので、ご確認ください。

[Jake5]

pointer-eventsを上手く使えばできるのですね。とても勉強になりました。
ご丁寧にソースコードまでご提供いただきありがとうございます。

Answer 2

.clickmsg:hoverがどの要素をホバーした際にスタイリングされているか認識が違っていると思います。

実際に、背景色を赤に指定してみて確かめると一目瞭然かと。

Comments

[Jake5]

ご回答ありがとうございます。
おっしゃる通りですね。

以下のようにすると問題は解決するのですが、
<div class="tooltip_wrap">
<div class="clickmsg"><a href="#">ここをホバー</a>
</div>
<ul class="tooltip">
<li><a href="">リンク1</a></li>
<li><a href="#">リンク2</a></li>
</ul>
</div>
.clickmsg:hover ~ .tooltip {
opacity: 1;
transform: translate3d(0, 0, 0);
}
"ここをホバー"からマウスのポインターがはずれるとツールチップが非表示になるためリンク1,2がクリックできません。

元の質問とは趣旨がずれてしまいますが、解決方法がありましたらご教示いただきたいです。