1. ホーム
  2. css

[解決済み] hover(マウスを離した時)の反対語は何ですか?

2022-05-17 16:53:16

質問

の逆を行う方法はありますか? :hover だけを使って CSS?というように :hoveron Mouse Enter に相当するCSSはありますか? on Mouse Leave ?

リスト項目を使用したHTMLメニューがあります。項目のひとつにカーソルを合わせると、CSS のカラーアニメーションが #999 から black . マウスがアイテム領域から離れるときに、どうすれば逆の効果を生み出すことができるでしょうか。 black から #999 ?

jsFiddle

(この例だけに答えたいわけではなく、この例と同じように :hover という問題です)。

どのように解決するのですか?

私の理解が正しければ、ホバー状態ではなくリンクに遷移させることで同じことができます。

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の定義は。

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

その定義によれば、hover の反対語は、マウスが ではない です。私よりずっと頭のいい人がこの記事を書いていて、両方の状態に異なる遷移を設定しています -。 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;
}