ハイパーリンク画像の切り替えの実装についてアドバイスをお願いします。

ハイパーリンクされた画像の切り替えの実装について教えてください。
ページには小さい画像が表示され、マウスをその上に置くと大きい画像が表示され、画像が表示されます。はハイパーリンクです。
CSS を使用して 2 つの画像を切り替えるにはどうすればよいですか?

-----解決策---------

HTML コード

._NO{幅:80px;高さ:100px;ボーダー:1px 赤一色;フロート:左;背景:url(http://avatar.profile.csdn.net/B/9/3/2_xiongdawang.jpg) リピートなし;}
._NO:hover{background:url(http://www.fbreader.org/sites/default/files/fbreader.png) 繰り返しなし;}
<!--IE のサポートは良くありません -->
</スタイル>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<img src="http://www.fbreader.org/sites/default/files/fbreader.png">
<div class="_NO"></div>

<スクリプト>
$('img').on({
        クリック:function(){
        }、
        マウスオーバー:function(){
        $(this).attr("src","http://avatar.profile.csdn.net/B/9/3/2_xiongdawang.jpg");
        }、
        マウスアウト:function(){
        $(this).attr("src","http://www.fbreader.org/sites/default/files/fbreader.png");
        }
    })
</スクリプト> <div class="clear"></div>