将鼠标悬停在 li 上时更改图像并使用 CSS 永久保存该图像

Posted 2023-03-06

【中文标题】将鼠标悬停在 li 上时更改图像并使用 CSS 永久保存该图像

【英文标题】：Change image when hovering over li and keep that image permanent using CSS

【发布时间】：2016-09-22 10:05:42

【问题描述】：

对于我的生活，我无法弄清楚。本质上，有一个在页面访问时加载的图像占位符。然后，当我将鼠标悬停在选项 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>

【参考方案1】：

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

这是工作小提琴！

https://jsfiddle.net/ur7tns7L/

我带走了

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


);

这会使图像永久化，直到另一个图像悬停在上面。

【讨论】：

太棒了。我需要添加什么才能使悬停在 li 上的图像永久化，直到我将鼠标悬停在另一个 li 上？

见上面的修订版

诺亚，恒星！谢谢

【参考方案2】：

您最好的方法是使用 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）。

【讨论】：

尝试在JSFIDDLE 进行演示，但无法正常工作。你能提供一些意见吗？

您只是使用 id 而不是 class 作为元素。在这里工作 JSFiddle：jsfiddle.net/2Lfx1Lmq/3