如何使用 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】:从您的小提琴中,只需从 <ul>
元素中删除填充并将其提供给 <li>
元素,然后它们将被完全着色。
#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
放在anchor
的li
中,同时保留您的margin
要求。
参考:jsFiddle
【讨论】:
以上是关于如何使用 li:hover 更改整个 li 颜色?的主要内容,如果未能解决你的问题,请参考以下文章