css - 純粋な CSS でホバー効果を無効にする

Question

最初のスタックオーバーフローの投稿なので、明らかな何かが欠けている場合はご容赦ください。最初に回答を検索しましたが、関連性があると認識した回答が見つかりませんでした。

この jsfiddle には、<a>要素に遷移を発生させるためのホバーターゲットとして使用している div があります。

マークアップは次のとおりです。

<div class="target">Target
  <a href="#" class="LightMe"><p>.LightMe</p></a>
</div>

そしてCSS：

body {
  background-color: #099;
  height: 100%;
  width: 100%;
  margin-top:200px;
}

.target{
  position: absolute;
  left: 40%;
  height: 100px;
  width: 200px;
  padding: 20px;
  background-color: #ccc;
  cursor: pointer;

 }

a {
  display: block;
  position: relative;
  padding: 1px;
  border-radius: 15%;
}

a.LightMe {
  /*Starting state */
    background-color: white;
    border-style:solid;
    border-color:#fff;
    top: -120px;
    left: -200px;
    height: 80px;
    width: 80px;
    z-index: 10;
    opacity: 0;
    transition:left 0.55s  ease, opacity .5s .7s ease;
    -webkit-transition:left 0.55s  ease, opacity .5s .7s ease;
    -o-transition:left 0.55s  ease, opacity .5s .7s ease;
}

.target:hover a.LightMe {
/*Ending state*/
  left: 80px;
  opacity: 1;
  transition:left 0.55s .7s ease, opacity .5s ease;
  -webkit-transition:left 0.55s .7s ease, opacity .5s ease;
  -o-transition:left 0.55s .7s ease, opacity .5s ease;
}

.target:hover {
    transition: background-color 500ms ease;
    -webkit-background-color 500ms ease;
    -o-background-color 500ms ease;
    background-color:#999;
}

Target というラベルの付いた灰色のボックスにカーソルを合わせ、再び元に戻して、<a>要素のトランジションを確認します。それは私が望むことをしています:位置の遅延中に不透明度がフェードインし、その後、目的の位置にスライドします。ホバーターゲットの外に移動すると、<a>元の位置にスライドし、不透明度がフェードアウトします。これまでのところすべて順調です。
問題は、ユーザーが非表示の<a>要素にカーソルを合わせると、同じ一連の遷移がトリガーされ、あらゆる種類の意図しない大混乱が引き起こされることです。

要素の上に直接ホバーすることへの応答を防ぎたいと思い<a>ます。可能であれば、それをCSSに保持し続けたいと思っています。

明示的なホバーを追加してこれをオーバーライドしようとしましたが、役に立ちませんでした<a>。.LightMe(それは、セレクターの構文を正しく理解していなかっただけかもしれません。)

テストのために意図的に背景色のトランジションを追加した.targetところ、興味深い手がかりが得られました。それは、 div<a>の上流のトランジションをトリガーする上にカーソルを合わせるということです。.targetそれが私の脳が壊れた場所であり、助けを求めたほうがよいと判断しました.

ここでは頭上にあるいくつかの作業を行っています。見つけられる最も近いものから始めて、必要なものに向かって作業を進めました。これがjsfiddleの出発点でした（作者に感謝します）：

css - 純粋な CSS でホバー効果を無効にする

2 に答える 2

Related

Reference