web-dev-qa-db-ja.com

：hover（mouse leave）の反対は何ですか？

:hoversing only CSSの反対を行う方法はありますか？たとえば、:hoverがon Mouse Enterの場合、on Mouse Leaveと同等のCSSはありますか？

例：

リストアイテムを使用するHTMLメニューがあります。アイテムの1つをホバーすると、#999からblackへのCSSカラーアニメーションがあります。 blackから#999へのアニメーションを使用して、マウスがアイテム領域を離れるときに逆の効果を作成するにはどうすればよいですか？

jsFiddle

（この例だけに答えるのではなく、「:hoverの反対」の問題全体に答えたいと思います。）

csshover
94
Cthulhu

私が正しく理解している場合、ホバー状態ではなくリンクに遷移を移動することで同じことを行うことができます：

ul li a {
    color:#999;       
    transition: color 0.5s linear; /* vendorless fallback */
    -o-transition: color 0.5s linear; /* opera */
    -ms-transition: color 0.5s linear; /* IE 10 */
    -moz-transition: color 0.5s linear; /* Firefox */
    -webkit-transition: color 0.5s linear; /*safari and chrome */
}

ul li a:hover {
    color:black;
    cursor: pointer;
}

http://jsfiddle.net/spacebeers/sELKu/3/

ホバーの定義は次のとおりです。

：hoverセレクターは、マウスオーバーしたときに要素を選択するために使用されます。

その定義により、ホバーの反対は、マウスがその上にあるnotポイントです。私よりもはるかに賢い人がこの記事を書いて、両方の状態で異なる遷移を設定しています- http://css-tricks.com/different-transitions-for-hover-on-hover-off/

#thing {
   padding: 10px;
   border-radius: 5px;

  /* HOVER OFF */
   -webkit-transition: padding 2s;
}

#thing:hover {
   padding: 20px;
   border-radius: 15px;

  /* HOVER ON */
   -webkit-transition: border-radius 2s;
}
79
SpaceBeers

アニメーションの代わりに CSSトランジション を使用してください。

A {
    color: #999;
    transition: color 1s ease-in-out;
}

A:hover {
    color: #000;
}

ライブデモ

15
Marat Tanalin

いいえ、CSSにはマウスを残すための明示的なプロパティはありません。

この効果を達成するには、問題の項目を除く他のすべての要素で：hoverを使用できます。しかし、それがどれほど実用的かはわかりません。

JS/jQueryソリューションを検討する必要があると思います。

5
Moin Zaman

CSS3トランジションを使用できます

いくつかの良いリンク：

http://css-tricks.com/different-transitions-for-hover-on-hover-off/

http://www.alistapart.com/articles/understanding-css3-transitions/

2
SVS

ここでの答えは十分ですが、この問題に関する W3Schools の例は非常に簡単だと思います（混乱はすぐに解消されました）。

:hoverセレクターを使用して、マウスをボタンの上に移動したときにボタンのスタイルを変更します。

ヒント：transition-durationプロパティを使用して、「ホバー」効果の速度を決定します。

例

.button {
    -webkit-transition-duration: 0.4s; /* Safari & Chrome */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

要約すると、「enter」アニメーションと「exit」アニメーションを同じにするトランジションでは、ホバーセレクター.buttonではなく、メインセレクター.button:hoverでトランジションを使用する必要があります。 「入力」と「終了」のアニメーションを異なるものにするトランジションの場合、異なるメインセレクターとホバーセレクターのトランジションを指定する必要があります。

0
Govind Rai

:hoverを誤解しています。マウスがアイテムの上に入っただけでなく、マウスがアイテムの上にあると表示されます。

アニメーションを:hoverなしでセレクターに追加して、必要な効果を得ることができます。

移行はより良いオプションです： http://jsfiddle.net/Cvx96/

0
Alex Chamberlain

継続時間を非ホバー選択に入れます：

li a {
  background-color: #111;
  transition:1s;
}

li a:hover {
  padding:19px;
}
0
Hassan Mahmoud

:hoverの反対は:linkのようです。

（編集：4つのセレクター:link、:visited、:hover、:activeがあるため、技術的には正反対ではありません。:focusを含める場合は5つです。）

たとえば、ルール.button:hover{ text-decoration:none }を定義してボタンの下線を削除する場合、一部のブラウザーでボタンをロールオフすると下線が表示されます。 .button:hover, .button:link{ text-decoration:none }でこれを修正しました

もちろん、これは実際にリンクである要素に対してのみ機能します（href属性があります）

0
scripter