javascript - ホバー時に画像を消去

Question

ここに示すようなメニュー構造があります。

すべてのアイテムには背景画像があります。しかし、ホバーバックすると、メニュー項目の画像が非表示になります。js コードはこの img では有効ではありませんが、これを解決する方法がわかりません。

私はまだJavaScriptのフェード効果が欲しいのですが、私のimgを隠しません。

通常は：

問題: (ホバーとホバーアウト)

私が欲しい：

Answer 1

ホバー時に背景をフェードさせ、ホバーアウト時に元に戻したい場合は、次の js を使用します。

$(document).ready(function(){
var bg;
$("#right_menu a").mouseover(function() {
    bg = $(this).css('background-color');
     $(this).animate({ backgroundColor:'#002C6A'},500);
}).mouseout(function() {
    $(this).animate({ backgroundColor:bg},500);
});       
});​

画像を使用する場合は、background-color を background に変更します。

実際: http://jsfiddle.net/3TDF3/2/

---

更新:コードを再訪しました。問題の多くは、css クラスがliに設定されているのに、変更が行われていることです。

background-image を li に設定していますが、a をアニメーション化しています。したがって、li の背景は a の新しい背景で隠されます。

$("#right_menu a").mouseoverに変更$("#right_menu li").mouseover

Answer 2

これを試して

$(document).ready(function(){
    var backgroundimage = $(this).css("background-image");//store it in a variable
    $("#right_menu a").mouseover(function() {
         $(this).animate({ backgroundColor:'#002C6A'},500);
        $(this).css("background-image","none");//remove it
    }).mouseout(function() {
        $(this).animate({ backgroundColor:'#fff'},500);
        $(this).css("background-image",backgroundimage );//bring it back
    });       
});​

Answer 3

画像の代わりに背景色を使用してみてください。マウスがリンクから離れたときに、背景色を以前の値に設定します。背景色が十分に見える画像を使用することは、悪い考えのように見えます。