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

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

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

Я пробовал 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'); 
     } 
    }); 
});

Помощь будет высоко оценена.

Спасибо!

источник

2013-10-25 bad boy

Не используйте ярлык '.hover()', просто привяжите событие 'mouseenter', например' $ ('# img1'). On ('mouseenter', function() {...}) ' –

In ваше «если бы» вы относитесь к тому же URL-адресу, что и в вашем, если –

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

$("#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'); 
    } 
});

В соответствии с моим комментарием, вы не имеете Используйте .hover() ярлык, просто связать mouseenter событие.

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

источник

2013-10-25 16:27:05

wow. работает как шарм. большое спасибо! –

Добро пожаловать :) Если бы мой ответ помог вам почувствовать себя свободным, чтобы поддержать его и принять его как правильный ответ. –

я буду. stackoverflow говорит мне ждать еще 2 минуты. ;) –

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

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

источник

2013-10-25 16:26:08 SLaks

благодарит @Slaks. высоко ценится –

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

ответ

Смежные вопросы