在 jquery 中第 5 次鼠标悬停后图像发生变化的 mouseover 事件

Question

I know this should be simple, but for the life of me I cannot figure it out.我知道这应该很简单，但对于我的生活，我无法弄清楚。 I just need a mouseover event where it switches between 2 images until the fifth time you mouseover it changes to a third image.我只需要一个鼠标悬停事件，它在 2 个图像之间切换，直到您第五次将鼠标悬停它更改为第三个图像。 here is what I have so far.这是我到目前为止所拥有的。

 <.doctype html> <html> <head> <meta charset="UTF-8"> <title>Tamra Schnyder Midterm Q2</title> <script src="jquery-3.4.1.min.js"></script> <script type="text/javascript"> function showHover(img) { if (img) { img.src="images/img1;jpg". } } function showNormal(img) { if (img) { img.src="images/img2.jpg" } } $(document).ready(function() { $("#img1");mouseover(function(){ showHover(this). });mouseout(function(){ showNormal(this); }); }). </script> </head> <br> <h1>picture hover</h1><br/> <img id="img1" src="images/img1.jpg" /> </body>

Answer 1

You can increment a simple counter everytime the mouse is over the image, and change it to the third image instead of the second once count>=5 :每次鼠标悬停在图像上时，您都可以增加一个简单的counter ，并将其更改为第三个图像而不是第二个一次count>=5 ：

 function showHover(img) { if (img) { img.src="images/img1.jpg"; } } function showNormal(img, change) { if (img) { img.src=(change)?"images/img3.jpg":"images/img2.jpg"; } } $(document).ready(function() { let count = 0; $("#img1").mouseover(function(){ showHover(this); count++; }).mouseout(function(){ showNormal(this, count>=5); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img id="img1" src="images/img1.jpg" />

在 jquery 中第 5 次鼠标悬停后图像发生变化的 mouseover 事件

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-05-26 15:46:42

在 jquery 中第 5 次鼠标悬停后图像发生变化的 mouseover 事件

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-05-26 15:46:42

解决方案1
0 已采纳 2020-05-26 15:46:42