событие mouseover, при котором изображение изменяется после 5-го наведения курсора в jquery - PullRequest
Новая
       12

событие mouseover, при котором изображение изменяется после 5-го наведения курсора в jquery

1 голос
/ 26 мая 2020

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

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

1 Ответ

0 голосов
/ 26 мая 2020

Вы можете увеличивать простой 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" />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...