Question

我的代码有问题我将解释一下它是如何工作的，

这样做的想法是，当悬停在标记（a）中时，将id="meal"的图像更改为（data-meal = "meal-14"）中的图像。几句话

预定图像为meal-0.png，悬停在标记（a）中，带有（data-meal = 14），用（meal-14.png）替换图像的网址，< / p>

一切正常，我只有一个问题，就是当你停止盘旋时，不要回到预先确定的图像，它会停留在悬停的图像中。应该回到图像meal-0.png。

 <div class="imagen-hover" id="meal">
        <img src="/public/tienda/meal-0.png" alt="">
    </div>  

    <ul>
<li><a class="carne-a" data-meal="meal-14">14. Punta de Anca</a></li>
<li><a class="carne-a" data-meal="meal-16">16. Chata Angosta</a></li>
    </ul>


jQuery(document).ready(function($) {

            var path = "/public/images/";
            $(".meal-a").on("mouseover", function() {
                var meal = $(this).attr("data-meal") + ".png";
                $("#meal img").attr("src", path + meal)

            });
});

Answer 1

这是因为它完全按照你的要求去做。

您需要为mouseleave

创建另一个事件处理程序

或者你可以查看jQuery文档，mouseenter可以带两个回调，一个用于输入，一个用于离开

        $(".meal-a").mouseenter( function() {
            var meal = $(this).attr("data-meal") + ".png";
            $("#meal img").attr("src", path + meal)

        }).mouseleave( function() { //for when mouse leaves
            });

我会推荐什么...你根本不需要javascript或jQuery，当用户将鼠标悬停在一个元素上时有一个css选择器

 .meal-a{ // regular code
  }
 .meal-a:hover{ // hover code
 }

Answer 2

同时添加＆＃34; mouseout＆＃34;处理将图像返回到先前值的函数

$(".meal-a").on("mouseout", function() {
     $("#meal img").attr("src", "meal-0.png")
});

鼠标悬停图像保持不变

2 个答案: