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

Question

背景图像是办公室的图像。 背景图片将有几个<a>标签供用户点击。 例如：桌面上的计算机上有一个<a>标签。 以这个例子为例，我想做以下事情：

• 将鼠标悬停在计算机上方的<a>标签上，将加载同一办公室的图片，但是，计算机已在 photoshop 中用白线勾勒出轮廓（例如： img/bureau2 ）。 表明它是可交互的。 从这个悬停远将其返回给你看，当你进入网站的原始图片（ img/bureau1 ）

• 您还可以单击<a>标签。 这将打开另一个图像（ img/bureau3 ）。

到目前为止，我设法在hover获得更改并click以工作。 问题是，从徘徊远<a>标签将CANCLE的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

要执行您想要的操作，您需要保持某种状态，指示用户单击而不是悬停。 在单击处理程序中，您可以向#backgroundImage元素添加一个类或 data-*，稍后在您取消悬停时检查#backgroundImage元素。

示例codesanbox 。

Answer 2

在我看来，你想要做的是一个图像映射。 但是为了您的问题，我将专注于一个特定的链接。

当你移动鼠标时，点击生成的图像消失的原因，是因为它仍然绑定到之前的悬停事件。 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>