在锚点悬停时更改 li答案

【问题标题】：Change li on anchor hover在锚点悬停时更改 li
【发布时间】：2014-03-26 02:31:38
【问题描述】：

我有一个链接列表，当我将鼠标悬停在上面时，我希望整个 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 区域都这样做。

我该怎么做呢？

谢谢。

【问题讨论】：

你能添加你的html吗？
发布更新，添加了 html :)
如果链接仍在 li 内，则将鼠标悬停在链接上也会触发 li:hover。
有什么问题jsfiddle ??
@Digzol 是的，但这不会改变<li>的样式

标签： html css

【解决方案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/

【讨论】：

已排序，我不得不将 li 边距更改为填充顶部和底部以获得效果，但结合您回答的内容，它很有效。干杯！

【解决方案2】：

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

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

【讨论】：