Html 将鼠标悬停在列表上时，是否在列表左侧添加图像（列表有背景）？

我需要一个有两个背景的列表，一个是可见的，另一个是隐藏的，当列表结束时，第二个图像应该显示在第一个图像左侧的第一个图像

你可以在facebook上看到这一点。在facebook群组列表中，当我们将鼠标悬停在任意一个群组上时，它会显示一个用于设置的添加图标，我想实现这一功能。任何帮助都将得到充分的帮助

我尝试了下面的代码，但没有得到，可以有人修复这个错误

<ul class="fav">
    <li> 
        <a href="#" class="page">
            <img src="image/page.png" alt="Page">Favourite Page
        </a>
        <a href="#" class="setting">
            <img source="image/setting2.png">
        </a>
    </li>
</ul>

如果你想考虑jQuery，你可以用它来隐藏/显示你想要的设置链接：

$( "li" ).hover(function() {
$(this).find(".setting").toggleClass("settingVis");
});

这个CSS：

.setting{
    display: none;
}
.settingVis{
    display: inline-block;
}

---

-或-

我更喜欢使用div而不是ul，因为您可以使用css技巧：

.page:hover > .setting img {code here}

这是一个演示，这是你想要实现的吗

---

因此，您可以在右下角显示一个小的设置图标。

@Froint设置未显示在右侧。您可以像在facebook中一样将设置放置在左侧。您可以将两个图像放置为，一个始终显示，另一个在链接悬停时显示。就像facebook的群组设置。是的，就像这样，谢谢。我可以不使用JQuery就这样做吗？由于类的原因，它对我不起作用，因为我在一个文件中有3个列表。每个列表都有不同的类名。当我们使用类引用UL时，它不起作用，任何帮助都会很明显。你能把两个图像作为，一个始终显示，另一个在链接悬停时显示。比如facebook群组设置。

.page:hover > .setting img {code here}