2 изображения. изменить только при наведении мыши

Question

2 изображения. изменить только при наведении мыши

0

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

У меня есть 2 изображения, image1 и image2. image1 - это исходное изображение, когда отображаемый mouse2 должен отображаться и должен оставаться даже при мыши. при следующем паре исходное изображение заменяет image2 и так далее...

Я пробовал 2 кода. Первый изменяет изображение обратно на мышь. Второй, ничего не происходит даже при начальном наведении.

Код 1

$(document).ready(function () {
    $("#img1").hover(function () {
        if ($(this).attr('src') == 'www.domain.com/image1.jpg') {
            $(this).attr('src','www.domain.com/image2.jpg');
        } else if ($(this).attr('src') == 'www.domain.com/image1.jpg') {
            $(this).attr('src','www.domain.com/image1.jpg');
        }
    });
});

Код 2

$(document).ready(function () {
    $("#img1").hover(function () {
        if ($(this).attr('src') == 'www.domain.com/image1.jpg') {
            $(this).attr('src','www.domain.com/image2.jpg');
        }
        if ($(this).attr('src') == 'www.domain.com/image1.jpg') {
            $(this).attr('src','www.domain.com/image1.jpg');
        }
    });
});

Помощь будет принята с благодарностью.

Благодарю!

bad boy 25 окт. 2013, в 18:56

Источник

0

Не используйте ярлык mouseenter .hover() , просто привяжите событие mouseenter как $('#img1').on('mouseenter', function() { ... })
Matteo Tassinari 25 окт. 2013, в 16:26
0

В вашем «else if» вы относитесь к тому же URL, что и в вашем if
Eran H. 25 окт. 2013, в 16:27

Теги:

jquery

hover

2 ответа

1

Как четко указано в документации, функция hover добавляет обработчик как для mouseenter и для mouseleave.

Если вы хотите обрабатывать только mouseenter, не делайте этого.

SLaks 25 окт. 2013, в 13:42

0

спасибо @Slaks. очень признателен
bad boy 25 окт. 2013, в 16:36

Ещё вопросы

Не используйте ярлык mouseenter .hover() , просто привяжите событие mouseenter как $('#img1').on('mouseenter', function() { ... })
В вашем «else if» вы относитесь к тому же URL, что и в вашем if

Matteo Tassinari · Accepted Answer · 2013-10-25T15-06-00.000Z

Попробуй это:

$("#img1").on('mouseenter', function () {
    if ($(this).attr('src') == 'www.domain.com/image1.jpg') {
        $(this).attr('src','www.domain.com/image2.jpg');
    } else if ($(this).attr('src') == 'www.domain.com/image2.jpg') {
        $(this).attr('src','www.domain.com/image1.jpg');
    }
});

Согласно моему комментарию, вы не используете ярлык mouseenter .hover(), просто привяжите событие mouseenter.

Изменение: я также исправил часть else if, но я оставляю вам оптимизацию кода.

Ух ты. работает как шарм. Спасибо большое, сэр!
Не за что :) Если мой ответ помог вам, не стесняйтесь высказаться и принять его как правильный ответ.
Я буду. stackoverflow говорит мне подождать еще 2 минуты, чтобы сделать это. ;)