：hover（マウスから離れる）の反対は何ですか？

CSS :hover のみを使用する反対の方法はありますか？以下のように：場合:hoverでon Mouse Enter、CSSは以下と等価ありますかon Mouse Leave？

例：

リストアイテムを使用するHTMLメニューがあります。アイテムの1つにカーソルを合わせると、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セレクタは、要素の上にマウスを置いたときに要素を選択するために使用されます。

その定義では、ホバーの反対は、マウスがその上にない任意のポイントです。私よりはるかに賢い人がこの記事を書いて、両方の状態に異なる遷移を設定しています-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;
}

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

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

A:hover {
    color: #000;
}

ライブデモ

CSSにはマウスリーブの明示的なプロパティはありません。

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

私はあなたがJS / jQueryソリューションを見る必要があると思います。

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

いくつかの良いリンク：

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

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

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

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

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

例

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

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

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

持続時間を非ホバー選択に入れます。

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

li a:hover {
  padding:19px;
}

使っている要素にトランジションを追加するだけです。ページが読み込まれるとき、いくつかの影響があることに注意してください。境界線の半径を変更した場合と同様に、DOMが読み込まれると変更されます。

.element {
  width: 100px;
  transition: all ease-in-out 0.5s;
}
 
 .element:hover {
  width: 200px;
    transition: all ease-in-out 0.5s;
}

あなたは誤解してい:hoverます。それは、マウスがアイテムに入ったばかりではなく、アイテムの上にあることを示しています。

:hover必要な効果を得るためにアニメーションをセレクターに追加することはできません。

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

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

（編集：ない技術的に反対4つのセレクタがあるので:link、:visited、:hoverそして:activeあなたが含まれている場合ファイブは。:focus。）

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

もちろん、これは実際にリンクされている要素（href属性を持つ）に対してのみ機能します

トランジションとinicialクラスのアニメーションの名前を追加するだけで、ul li a、「transition」プロパティを追加するだけで十分です。

ul li {
    display: inline;
    margin-left: 20px;
}

ul li a {
    color: #999;
    transition: 1s;
    -webkit-animation: item-hover-off 1s;
    -moz-animation: item-hover-off 1s;
    animation: item-hover-off 1s;
}

ul li a:hover {
    color: black;
    cursor: pointer;
    -webkit-animation: item-hover 1s;
    -moz-animation: item-hover 1s;
    animation: item-hover 1s;
}

@keyframes item-hover {
    from {
      color: #999;
      }
    to {
      color: black;
      }
}
    
@-moz-keyframes item-hover {
    from {
        color: #999;
      }
    to {
        color: black;
      }
}
    
@-webkit-keyframes item-hover {
    from {
        color: #999;
      }
    to {
        color: black;
      }
}

@keyframes item-hover-off {
    from {
      color: black;
      }
    to {
      color: #999;
      }
}
    
@-moz-keyframes item-hover-off {
    from {
        color: black;
      }
    to {
        color: #999;
      }
}
    
@-webkit-keyframes item-hover-off {
    from {
        color: black;
      }
    to {
        color: #999;
      }
}

<ul>
    <li><a>Home</a></li>
    <li><a>About</a></li>
    <li><a>Contacts</a></li>
</ul>