悬停时显示的背景图像 - 列表项答案

【问题标题】：Background image to show on hover - list item悬停时显示的背景图像 - 列表项
【发布时间】：2014-02-27 13:37:44
【问题描述】：

尝试获取仅在悬停列表项时显示的背景图像。目前在：

<div id="nav">
        <ul>
            <li><a href="#">WHO ARE WE?</a></li>
            <li><a href="#">WHAT WE DO?</a></li>
            <li>GALLERY</li>
            <li>CALENDAR</li>
            <li>HISTORY</li>
            <li>CONTACT US</li>
        </ul>
</div>

有了这个：

#nav {
    position: fixed;
    margin-left: 100px;
    width: 200px;
    float: left;
    margin-top: 100px;
    color: white;
}

ul {
    list-style-type: none;
}

li {
    margin-bottom: 20px;
    font-size: 2em;
}

li:hover {
    background: url('images/arrow.png') no-repeat;
}

到目前为止没有运气。任何指针将不胜感激。图片为 300x205（如果有任何区别）。

【问题讨论】：

能否给我一张图片的绝对路径（比如http://example.com/image.png）
这对我有用。这是一个带有不同图像的 jsfiddle jsfiddle.net/ybmP5
当然：offer.vpn.sh/lsumc/images/arrow.png ^ 忽略大量空间。我尝试了 Peter Klipfel 帖子中的图像，但仍然没有运气。目前完整的网址是：offer.vpn.sh/lsumc，如果您想查看完整的源代码。
为了用户体验，不要在悬停时调用图像，预加载它！

标签： html css background hover html-lists

【解决方案1】：

这段代码运行良好

演示http://jsfiddle.net/x8dSP/2603/

问题更可能是 CSS 中指定的背景图像的文件路径。您可能需要提升文件夹级别，具体取决于您存储图像的位置与存储 CSS 文件的位置。例如：

background: url('../images/arrow.png') no-repeat;

【讨论】：