jQuery не добавляет фонового изображения

Question

У меня проблема, я хочу добавить стрелку на hover. Я хочу сделать это javascript, потому что я также использую jquery easing (дезактивирован для этого теста), и если у пользователя нет javascript, он будет за linktext

anywas padding и цвет фона работает! но не изображение? Я не понимаю почему. в 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: нет ... прокручивать" не приходит от

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

Answer 1

Как @elclanrs сказал, !important не должно быть там. На самом деле это и вызывает проблему. Попробуйте удалить его.

Вот simplified demo.

Answer 2

Почему вы используете JQuery для этого? Это можно сделать с помощью простого 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, а не напрямую устанавливать стиль.

Кстати, вы можете существенно улучшить производительность кода путем объединения такого рода JQuery вызовов в один вызов, например:

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

Answer 5

Вы должны в идеале поместить все ваши CSS в одной строке код, как у вас в подвешенном состоянии из функции:

$('.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; 
}