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

Question

我这辈子都想不通。本质上有一个图像占位符在页面访问时加载。然后，当我将鼠标悬停在选项 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>

Answer 1

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

Answer 2

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

这是工作 fiddle！

https://jsfiddle.net/ur7tns7L/

我带走了

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


});

这会使图像永久存在，直到将另一个图像悬停在上方。

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

Change image when hovering over li and keep that image permanent using CSS

html

css

image

hover

html-lists