Javascript 鼠标悬停图像保持不变

我对这个代码有问题 我会解释一下它是如何工作的

这样做的想法是，当在标记a中悬停时，将id=MEIN的图像更改为数据MEIN=MEIN-14中的图像。。几句话

预先确定的图像是mean-0.png，悬停在标记a中，数据为mean=14，将图像的url替换为mean-14.png

一切正常，我只有一个问题，那就是当你停止悬停时，不要回到预先确定的图像，它会停留在变成悬停的图像中。应返回到图像-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)

            });
});

---

那是因为它正在做你让它做的事情

您需要为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
 }

---

还添加mouseout函数来处理将图像返回到其先前值的操作

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

---

是的，这不是必要的js，但是很多图片，我不得不重复很多代码。这不是完全正确的，有很多方法可以像javascript一样共享用css编写的代码。还有-别忘了hover和mouseenter在移动触摸设备上做不了任何事情考虑为移动设备添加一个选项，也许点击图像会改变状态是的@斯科特·塞尔比