Question

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

<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。

Answer 1

此代码可以正常使用

DEMO http://jsfiddle.net/x8dSP/2603/

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

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

在悬停上显示的背景图像 - 列表项目

1 个答案: