[HTML / CSS] VAとonmouseoutのonmouseover

アイコンにカーソルを合わせると時々、あなたはそれが背景色や他の画像を変更され、ウェブサイトで見ることができます. そうするために、我々は簡単にそのユーザーのためのCSSをオフラインと考えることができますホバー. しかし、その後どのようにローカルで使用して? 現在、この時点で私はまだそこに知っているがありません 1 それがどのように使われますか VAとonmouseoutのonmouseover.

まだ開始. すべてのローカルユーザーCSS.
今、私たちは持っています 1 画像 (無背景), その上にホバーあなたのマウスは、背景色を変更する方法?

<img style=" background: green;" 
       onmouseover = "this.style.background='blue';" 
       onmouseout = "this.style.background='green';" 
       src="http://i.imgur.com/Pb9njIR.png" 
  />

最初の行は、最初の背景画像を設定します, 二行目 2 あなたが画像にカーソルを合わせると背景を設定, 現在 3 背景アウトセットしたときにホバー画像. デモ

フォロー, あなたがにカーソルを合わせると画像を変更したいです? 退職の場合と同じ操作を行います, しかし、画像SRCリンクではなく、背景.

<img src="http://i.imgur.com/Pb9njIR.png"
       onmouseover="this.src='https://i.imgur.com/KDmsF.jpg'"  
       onmouseout="this.src='https://i.imgur.com/Pb9njIR.png'"  
  />

デモ

同様に, 通常の少しぼやけをしたいです, あなたがイメージ明るくにカーソルを合わせると、我々は、プロパティを使用するよりも、 不透明度.

<a style="opacity:0.1" onMouseOver="this.style.opacity='1.0'" onMouseOut="this.style.opacity='0.3'" title="my facebook" target="_blank" href="https://www.facebook.com/nguyenvanquan7826"><img src="http://i.imgur.com/lLH2kv5s.jpg" alt="facebook" width="50" height="50" /></a>
<a style="opacity:0.1" onMouseOver="this.style.opacity='1.0'" onMouseOut="this.style.opacity='0.3'" title="my google+" target="_blank" href="https://google.com/+nguyenvanquan7826"><img src="http://i.imgur.com/u0VhMBcs.jpg" alt="google+" width="50" height="50" /></a>
<a style="opacity:0.1" onMouseOver="this.style.opacity='1.0'" onMouseOut="this.style.opacity='0.3'" title="my twitter" target="_blank" href="https://twitter.com/baytamhaisau"><img src="http://i.imgur.com/Op7dTfNs.jpg" alt="twitter" width="50" height="50" /></a>
<a style="opacity:0.1" onMouseOver="this.style.opacity='1.0'" onMouseOut="this.style.opacity='0.3'" title="my youtube" target="_blank" href="https://www.youtube.com/user/nguyenvanquan7826"><img src="http://i.imgur.com/9aTlnSks.jpg" alt="youtube" width="50" height="50" /></a>

残念ながら、彼らのために、このような= wordpress.comのブログを使用しません)). あなたは人と共有するWordPressのブログを使用する方法を知っていますオフライン.