javascript - 悬停时更改背景图像，但也可以使用 jQuery 单击

Question

背景图像是办公室的图像。背景图片会有几个<a>人们可以点击的标签。例如:有一个 <a> table 上电脑上的标签。以这个例子为例，我想做以下事情:

• 将鼠标悬停在 <a> 上计算机上的标签，将加载同一办公室的图片，但是，计算机已在 photoshop 中用白线勾勒出轮廓(比方说: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

在我看来，您要做的是 image map .但为了您的问题，我将重点关注一个特定链接。

当您移动鼠标时点击生成的图像消失的原因是因为它仍然绑定(bind)到之前的悬停事件。 hover 方法是 mouseenter 和 mouseleave 的快捷方式。为了避免这种情况，您需要取消绑定(bind)该事件处理程序。

编辑: 我修改了我的答案，使其更接近您问题中的代码。为了“重置”图像，我建议使用用户可以点击的链接，以减少他们的混淆。

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>