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执行此操作的另一种方法。您必须加载自己的图像才能真正看到它的工作。

这是工作小提琴！

https://github.com/dotnet/core/blob/master/Documentation/prereqs.md#windows-dependencies

我带走了

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


});

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

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

2 个答案: