Question

我有一个链接列表，当我将鼠标悬停在上面时，我希望整个li更改背景颜色。这是一种常见的效果，但我不确定如何让它发挥作用。

#topbar ul li{
            display:inline;
            margin:0 10px;
        }
        #topbar ul li a{
            color:white;
            text-decoration: none;
        }
        #topbar ul li a:hover{
            background-color:#323232;
        }

<div id="topbar">
        <ul>
            <li>
                <a href="">About Us</a>
            </li>
            <li>
                <a href="">Services</a>
            </li>
            <li>
                <a href="">Gallery</a>
            </li>
            <li>
                <a href="" class="nav-quote-button">Get Quote</a>
            </li>
        </ul>
    </div>

目前，只有锚标记会更改背景颜色，但我希望整个li区域都这样做。

我将如何做到这一点？

感谢。

Answer 1

这将完成这项工作：

#topbar ul li:hover {
    background-color:#323232;
}

此外，您需要将li更改为display:inline-block;而不是display:inline;

#topbar ul li{
    display:inline-block;
    margin:0 10px;
}

演示 http://jsfiddle.net/ZA4nJ/

Answer 2

#topbar ul li:hover {
    background-color: <Insert the color here>
}

这是我上面写的这两行，或者你也可以使用的javascript事件。当你有CSS时，它并不是非常需要，但是使用一个名为jQuery的库是另一种方法。如果您有兴趣，可以阅读它。

在锚悬停时改变li

2 个答案: