如何使用 li:hover 更改整个 li 颜色?

Posted

技术标签:

【中文标题】如何使用 li:hover 更改整个 li 颜色?【英文标题】:How do I use li:hover to change the WHOLE li color? 【发布时间】:2012-07-21 06:12:42 【问题描述】:

我正在为我自己的个人网站使用ul 导航,但我终生无法弄清楚如何更改整个li 元素的background-color。如果您查看this fiddle,您会看到我想要完成的工作。我到处寻找,但我还没有找到“突出显示”文本左侧区域的解决方案。此外,我不确定如何解释margin: 2px。下面是一些相关的 CSS:

#nav li 
    margin:2px;


#nav li:hover 
    margin:2px; <-- does not affect where the background color changes, it seems
    background-color:#b5aec8;

有没有办法使用纯 CSS 更改整个导航背景?如果是这样,怎么做?任何建议表示赞赏!

【问题讨论】:

提示:您不妨稍等片刻,以便查看多个答案并做出相应决定。 很公平,感谢您的建议。 【参考方案1】:

从您的小提琴中,只需从 &lt;ul&gt; 元素中删除填充并将其提供给 &lt;li&gt; 元素,然后它们将被完全着色。

#nav 
    width:80px;
    -moz-box-shadow: 0px 3px 5px #888;
    -webkit-box-shadow: 0px 3px 5px #888;
    box-shadow: 0px 3px 5px #888;
    position: fixed;
    left:0;
    padding-left: 0px; /* ******* Changed to 0 */
    top:0;
    margin-top:25%;
    list-style: none;
    background-color: #ccc;
    color:black;
    font-family:Helvetica;
    z-index: 1;



#nav ul 
    list-style: none;
    padding-left:0px;


#nav a                
    text-decoration:none;
    color:black;


#nav li 
    margin:2px;
    padding-left: 10px; /* ******* Returned to this element here */


#nav li:hover 
    margin:2px;
    background-color:#b5aec8;

See The Example Here.

【讨论】:

完美,我不敢相信我没有尝试过。谢谢!【参考方案2】:

考虑这个答案:这会将padding 放在anchorli 中,同时保留您的margin 要求。

参考:jsFiddle

【讨论】:

以上是关于如何使用 li:hover 更改整个 li 颜色?的主要内容,如果未能解决你的问题,请参考以下文章

CSS - 悬停时变暗,颜色未知[重复]

下拉菜单中的父 li 不改变悬停时的颜色

怎么让css里的li:hover改变里面的a

列表项“li:hover”不起作用

CSS LI hover - 浏览器兼容?

-webkit-tap-highlight-color 不起作用