Изменить фоновое изображение при наведении курсора, а также при нажатии jQuery

Question

Фоновое изображение - это изображение офиса. Фоновое изображение будет иметь несколько тегов <a>, по которым пользователь может щелкнуть. Например: на компьютере есть тег <a>. Используя этот пример, я хочу сделать следующее:

• При наведении на тег <a>, который находится над компьютером, загрузится в изображение того же самого В офисе, однако, компьютер был обведен белой линией в фотошопе ( Позволяет сказать: img/bureau2). Указывая, что это интерактивно. Наведя прочь от этого, вы вернетесь к исходному изображению, которое вы видите при входе на сайт (img/bureau1)

• Вы также можете щелкните по тегу <a>. Откроется другое изображение (img/bureau3).

Пока мне удалось заставить работать изменения hover и click. Проблема в том, что при наведении в сторону от тега <a> будет click.

Это то, что я имею до сих пор, как я могу решить эту проблему?

$(".computerHover").hover(function() {

    $("#backgroundImage").attr('src', 'img/bureau2.png');

  },
  function() {

    $("#backgroundImage").attr('src', 'img/bureau.png');

  });


$(".computerHover").click(function() {

  $("#backgroundImage").attr('src', 'img/bureau3.png');

});

#pagina2 {
  width: 100%;
  height: 100%;
}

#backgroundImage {
  height: 100vh;
  width: 100vw;
  z-index: 0;
  display: block;
}

.computerHover {
  width: 105px;
  height: 75px;
  position: absolute;
  right: 28vw;
  top: 40vh;
  z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pagina2">
  <div id="pagina2Background">

    <img id="backgroundImage" src="img/bureau.png">

    <div class="computer">
      <a class="computerHover"></a>
    </div>

  </div>
</div>

Answer 1

Мне кажется, что вы пытаетесь сделать, это карта изображения . Но ради вашего вопроса я остановлюсь на одной конкретной ссылке.

Причина, по которой генерируемое щелчком изображение исчезает при перемещении мыши, заключается в том, что оно все еще привязано к предыдущему событию наведения мыши. Метод hover является ярлыком для mouseenter и mouseleave. Чтобы обойти это, вам нужно отменить привязку этого обработчика событий.

РЕДАКТИРОВАТЬ: я переработал свой ответ, чтобы более близко походить на код в вашем вопросе. Чтобы «сбросить» изображение, я бы предложил использовать ссылку, по которой пользователь может щелкнуть, чтобы сделать его менее запутанным.

function switchImage() {
$(".computerHover").hover(function() {
$("#backgroundImage").attr('src', 'http://via.placeholder.com/300x300.png?text=Computer');
  },
  function() {
$("#backgroundImage").attr('src', 'http://via.placeholder.com/300x300.png?text=Office');
  });
}

// attach the hover events when page loads
switchImage();

$(".computerHover").on("click", function() {
$(this).off("mouseenter mouseleave");
  $("#backgroundImage").attr('src', 'http://via.placeholder.com/300x300.png?text=New Background');
});

// reattach hover handlers and set image back to default
$(".reset").on("click", function() {
switchImage();
  $("#backgroundImage").attr('src', 'http://via.placeholder.com/300x300.png?text=Office');
});

#pagina2 {
  width: 100%;
  height: 100%;
}

#backgroundImage {
  height: 100vh;
  width: 100vw;
  z-index: 0;
  display: block;
}

.computerHover {
  width: 105px;
  height: 75px;
  position: absolute;
  right: 28vw;
  top: 40vh;
  z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="pagina2">
  <div id="pagina2Background">
<a class="reset">Start Over</a>
<img id="backgroundImage" src="http://via.placeholder.com/300x300.png?text=Office">

<div class="computer">
  <a class="computerHover">Computer</a>
</div>

  </div>
</div>

Answer 2

Чтобы сделать то, что вы хотите, вам нужно сохранить какое-то состояние, которое указывает, что пользователь щелкнул вместо простого наведения. В обработчике кликов вы можете добавить элемент class или data- * к #backgroundImage, который вы позже будете проверять при снятии курсора.

Пример codesanbox .