jQueryが背景画像を追加しない

Question

私はホバーに矢印を追加したい問題があります。私はjqueryイージング（このテストでは非アクティブ化）を使用しているので、私はこれを行うにはjavascriptです。ユーザーがjavascriptを持っていない場合は、linktextの背後にあるでしょう

anywasパディングと背景色が動作します！画像はありませんか？私は理由を知りません。 CSSではこれはまさにこのように機能します！

//arrow 
     $('.sub-menu a').hover(function(){ 

      $(this).css('padding-top', '10px'); 
      $(this).css('padding-bottom', '10px'); 
      $(this).css('background-color', 'black'); 
      $(this).css('background-image', 'url(http://127.0.0.1/wp-content/themes/nicores/nico/small_arrow_white.png) !important'); 
      $(this).css('background-repeat', 'no-repeat !important'); 
      $(this).css('background-position', '25px 8px !important'); 
     }, 
     function(){ 

      $(this).css('background', 'none'); 

     }); 

私は私がどこを知らないのFirebugからこれを取得 "backgound：どれも...スクロールしない" あなたは、このためのjQueryを使用しているのはなぜ

padding-top: 10px; padding-bottom: 10px; background: none repeat scroll 0% 0% transparent; 

Answer 1

@elclanrsのように、!importantは存在してはいけません。実際、それが問題の原因です。削除してください。

ここには、 simplified demoです。

Answer 2

から来ていますか？これは簡単なCSSで行うことができます。

それでは、あまりにも多くの!importantを使用していますが、とにかくjQueryで設定しないでください。それらを取り除き、あなたのCSSをより良い方法で整理してください。

http://jonrohan.me/guide/css/creating-triangles-in-css/をご覧ください。

イージングが必要な場合は、divを作成し、CSSで矢印のスタイルを設定し、divを非表示にしてjQueryで表示します。

jsfiddleも提供できるので、達成しようとしていることが分かりやすいですか？

Answer 3

ローカル画像を使用してください。 URL全体の代わりにイメージの相対パスを指定してください。

Answer 4

私はインポートマンが問題だと思います。あなたが見ると、重要とマークされたスタイルはどれも設定されていません。

スタイルシートにCSSクラスを定義し、スタイルを直接設定する代わりにjQueryを使用してクラス名を削除して追加することをお勧めします。ところで

、あなたは、実質的にこのように、呼び出し、1つのコールへのjQueryのこれらの種類を組み合わせることにより、コードのパフォーマンスを向上させることができます：あなたは理想的な単一の行にすべてのあなたのCSSを置くべき

$(this).css({ 
    'padding-top': '10px', 
    'padding-bottom': '10px', 
    'background-color', 'black', 
    ...etc 
}); 

Answer 5

あなたのようなコードがあなたのホバーアウト機能を持っている： - 相対および絶対 -

$('.sub-menu a').hover(function(){ 

     $(this).css({'padding':'10px 0', 'background':'url(/path/to/image/small_white_arrow.png) no-repeat 25px 8px #000000'}); 
    }, 
    function(){ 
     $(this).css('background', 'none'); 
    }); 

また、画像へのパスを確認する必要がありますし、それが拾っなってきた場合に参照してください。また、アニメーションやトランジションエフェクトを使用していないため、CSSを使用しないでください。

.sub-menu a{ 
    background:none; 
} 

.sub-menu a:hover{ 
    background:url(/path/to/image/small_white_arrow.png) no-repeat 25px 8px #000000; 
}