Вопрос:

функция мышонка работает только вертикально

javascript jquery html

41 просмотра

2 ответа

6 Репутация автора

Я пытаюсь заменить одно изображение (закрытая сумка) на другое (открытая сумка) с помощью mouseenterи mouseleaveфункций. По какой-то причине это работает, только когда я оставляю мышь вертикально, а не горизонтально. Я подозреваю, что это имеет отношение к длине изображения, но я проверил это, и это не было проблемой. Вот мой код:

$("#tumi_front").mouseenter(function() {
  $("#tumi_front").hide();
  $("#tumi_open").show();
});
$("#tumi_open").mouseleave(function() {
  // alert('leave');
  $("#tumi_front").show();
  $("#tumi_open").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="tumi_front" src="tumi_front.png" alt="yolo front" height="40%" width="40%" />
<img id="tumi_open" src="tumi_open.png" alt="yolo open" height="30%" width="30%" " style="display: none " />

Заранее спасибо за помощь!

Автор: Pappricot Источник Размещён: 22.08.2016 09:20

Ответы (2)


1 плюс

5683 Репутация автора

Решение

Проблема в том, что вы устанавливаете два разных изображения на разную высоту и ширину. Ваше переднее изображение в, 40%а ваше второе в 30%. Поэтому, когда вы пытаетесь навести курсор за пределы вашего меньшего изображения, оно вызывает наведение на большее изображение, а затем снова скрывает ваше изображение, вызывая сбой.

Ваш код (40% 30% не работает)

Лучшим решением для этого было бы дать вашим изображениям один и тот же класс и переключать изображения. Это решит проблему наведения при использовании изображений разного размера, и это будет более эффективным.

JQuery

$(".double-img").on("mouseenter mouseleave", function() {
  $(".double-img").toggle();
});

JSFiddle

Мой код (40% 30% исправлено)

Автор: Hunter Turner Размещён: 22.08.2016 09:46

0 плюса

1495 Репутация автора

Почему бы не использовать 1 изображение (изображение спрайта) и сделать background-positioncss на :hover. Нет JQuery требуется!

Автор: Wim Mertens Размещён: 22.08.2016 09:50
Вопросы из категории :
32x32