Html 将鼠标悬停在li上时更改图像，并使用CSS保持该图像永久不变

为了我的生命，我无法理解它。本质上，页面访问时会加载一个图像占位符。然后，当我将鼠标悬停在选项1、2或3上时，一个新图像将取代它，并成为永久图像，直到我将鼠标悬停在另一个选项上。这可能吗

<div>
[Image - Loads on Visit]
[Image 2- Hidden until hover on li]
[Image 3- Hidden until hover on li]
</div>  

<div>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>

[图片-访问时加载]
[图2-将鼠标悬停在li上之前隐藏]
[图3-将鼠标悬停在li上之前隐藏]

选择1
选择2
选择3

实现这一点的最佳方法是使用JavaScript。jQuery将使您的工作更加轻松。对每个图像执行以下操作：

$( document ).ready(function() {
    $('li.list-class-1').mouseover(function(){
        $('.img-1').css({"display": "block"});
        $('.img-2').css({"display": "none"});
        $('.img-3').css({"display": "none"});
    });
    $('li.list-class-2').mouseover(function(){
        $('.img-2').css({"display": "block"});
        $('.img-1').css({"display": "none"});
        $('.img-3').css({"display": "none"});
    });
    $('li.list-class-3').mouseover(function(){
        $('.img-3').css({"display": "block"});
        $('.img-1').css({"display": "none"});
        $('.img-2').css({"display": "none"});
    });
});

---

此代码仅设置当您将鼠标悬停在列表项上时相关图像的显示。您需要为列表项和图像提供一些类（或ID）。

下面是使用jQuery的另一种方法。您必须加载自己的图像才能真正看到它的工作

这是工作小提琴

我拿走了

    $(#element).on("mouseleave",function(){


});

---

这将使图像永久保存，直到另一个图像悬停。

尝试在此处制作演示，但无法使其工作。你能提供一些输入吗？你只是用id而不是class来表示元素。在这里工作：太棒了。我需要添加什么才能使悬停在li上的图像永久化，直到我悬停在另一个li上？参见上面的修订版Noah，stellar！非常感谢。