Блог

Главная - Вопросы по программированию - jquery изменить фоновое изображение

jquery изменить фоновое изображение

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я пытаюсь поменять местами два изображения с помощью jQuery. Используя событие наведения, я попытался:

 $("#wlt-DealView .buyButton_new").mouseover(function(e){
    $('.buyButton_new').css('background-image','url(../images/compra_mouseOver.png)');
});
$("#wlt-DealView .buyButton_new").mouseout(function(e){
    $('.buyButton_new').css('background-image','url(../images/compra_normal.png)');
});

Но изображение не отображается, и после того, как я извлекаю из него мышь, оно запускает второе событие. Он должен обновиться с первым изображением, но этого не происходит.

Вы можете посмотреть здесь: http://107.20.186.103/deals/cuerpon .

Наведите указатель мыши на кнопку КУПИТЬ.

Комментарии:

1. Возможно, путь к вашим изображениям неверен или изображения не загружены на сервер

2. Подождите, почему вы не делаете это в CSS?

Ответ №1:

Изображение исчезает, потому что jQuery заменяет CSS локально, а не из вашей таблицы стилей, как раньше. Итак, ваш путь необходимо обновить, чтобы отразить путь от вашего HTML-файла до вашего изображения. Если ваш HTML-файл находился в вашей корневой папке, а «изображения» — в папке в этом корне, код был бы таким:

 $('.buyButton_new').css('background-image','url(images/compra_mouseOver.png)');

сначала я тоже запутался.

Комментарии:

1. Это решение помогло мне, потому что у меня была точка с запятой в конце инструкции url(). Я удалил точку с запятой, и изображение изменилось правильно.

Ответ №2:

Попробуйте это, код в любом случае лучше:

 $("#wlt-DealView .buyButton_new").hover(
    function()
    {
        $(this).css('background-image','url(../images/compra_mouseOver.png)');
    },
    function()
    {
        $(this).css('background-image','url(../images/compra_normal.png)');
    }
);

Ответ №3:

Если я попытаюсь ввести URLhttp://107.20.186.103/images/compra_mouseOver.png вручную в моем браузере я получаю 404.

http://107.20.186.103/deals/images/compra_mouseOver.png получает странное значение 500…

Я думаю, вы должны подготовить свои файлы изображений, и это сработает. Вы также можете настроить свой код с помощью функции jQuery.hover.

Комментарии:

1. относительный путь работал для css по умолчанию, но после того, как jquery обновил его, он не работал. Мне пришлось это изменить. Спасибо

2.@Iosub Кроме того, может быть, вы хотели бы рассмотреть возможность изменения классов вместо встроенного css? Используя эти: .addClass() .removeClass() .toggleClass() Изменение класса упростило бы задачу… по крайней мере, на мой взгляд. Кроме того, вы могли бы изменить URL изображения из файла css. Кроме того, поиск в Google, например: «addclass jquery», даст вам указания к jquery api, который предоставит вам больше информации.

Ответ №4:

Синтаксис следующий

 $(element).hover(function(){
  $(this).css(whatever);
}, function(){
  $(this).css(whatever);
});

Ответ №5:

добавьте полный путь к изображению и проверьте

 $("#wlt-DealView .buyButton_new").hover(
    function()
    {
        $(this).css('background-image','url(http://107.20.186.103/themes/classic/images/compra_mouseOver.png)');
    },
    function()
    {
        $(this).css('background-image','url(http://107.20.186.103/themes/classic/images/compra_normal.png)');
    }
);

Комментарии:

1. 1, но вы должны изменить первое изображение на compra_mouseOver.png

Ответ №6:

Используйте jQuery.hover вместо наведения курсора мыши и вывода курсора мыши