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

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. 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

您可以在每次鼠标悬停在图像上时递增一个简单的 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 event where the image changes after the 5th mouseover in jquery

html

jquery

mouseover