バックグラウンドポジションの問題

Question

私には、すべてが異なる背景イメージを持つliの束を持つulがあります。 各liをホバーすると、ロールオーバーの背景位置の変更が予想されます。 jquery関数 を起動するボタンを適用して、そのバックグラウンド位置の変更をすべてのliに同時に適用しました。 これも期待どおりに動作します。

jqueryを呼び出すボタンをホバーに移動すると、 は、もはや個々のlisを正常にホバリングできなくなります。ここ

が作業（またはしない）例です... http://www.weirdesigns.com/simple/ 第1ロール円を、もう一度cirlesを試し、その後、ボタンを試してみてください、彼らはもういけない仕事？

はここに私のjQueryの...助けてください：

$(document).ready(function(){ 
    $('.powerRoll').hover(function(){ 
     $('li').css({backgroundPosition: '0 -130px'}); 
    }) 
    .mouseout(function(){ 
     $('li').css({backgroundPosition: '0px 0px'}); 
    }) 
}); 

Answer 1

あなたJavascriptがあなたのli要素のインラインstyle属性を設定しているので、スタイルシートの宣言が却下されています。あなたは:hoverbackground-position宣言の最後に!importantを追加することによってこの問題を解決することができます

li:hover { 
    background-position : 0 -130px !important; 
} 

はまた、私はあなたのjQueryのは少し奇妙であることに気づきました。

あなたはhover()関数を持っていて、次にmouseout()を持っています。最後に、

$(document).ready(function(){ 
    $('.powerRoll').hover(function(){ 
     $('li').css("background-position","0 -130px"); 
    }, function(){ 
     $('li').css("background-position",""); 
    }); 
}); 

そして：次の2つを組み合わせ、より少ないスペースを使用することができます。

より良い

$(document).ready(function(){ 
    $('.powerRoll').hover(function(){ 
     $('li').css("background-position","0 -130px"); 
    }, function(){ 
     $('li').css("background-position","0px 0px"); 
    }); 
}); 

Javascriptを持つプロパティは、それをホバーのスタイルシートから継承まだ、あなただけの「クリア」でした私はあなたのcss()関数の構文を変更したことに気付くでしょう。これは、プロパティの値を変更しているだけなので、角括弧は必要ないためです。

Answer 2

問題はあなたのJavaScriptがスタイルシートで宣言されたCSS上で使用されているインラインCSSを設定していることです。

各リストアイテム要素の背景位置のクラス宣言に!importantを追加できます。

li:hover { 
    background-position : 0 -130px !important; 
} 

あなたはmouseout上のCSSルールより優先されることはありませんので、あなたのJSを変えることができる代わりに：

$('.powerRoll').mouseover(function(){ 
    $('li').css({backgroundPosition: '0 -130px'}); 
}) 
.mouseout(function(){ 
    $('li').css({backgroundPosition: ''}); 
}) 

を私はあなたのサイト上でこれらのメソッドの両方をテストし、彼らは両方として機能していたようですあなたは欲しい。

別の代替だむしろそれを変更するよりも要素から追加および削除するクラスを作成することですインラインCSS：

CSS -

li:hover, li.hover { 
    background-position : 0 -130px; 
} 

JS -

$('.powerRoll').mouseover(function(){ 
    $('li').addClass('hover'); 
}) 
.mouseout(function(){ 
    $('li').removeClass('hover'); 
}) 

Answer 3

非常に下のボタンからマウスを出すと、バックグラウンドの位置が0px 0pxに戻っています。インラインその要素へのスタイルは、他の場所で定義されたCSSクラスよりも優先されます。あなたがしたいことは、は、マウスアウト時にバックグラウンド位置のプロパティを削除するので、再びあなたのクラスに注意を払うでしょう。

​​

See the jsFiddle.