怎么让css里的li:hover改变里面的a
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎么让css里的li:hover改变里面的a相关的知识,希望对你有一定的参考价值。
参考技术A 怎么让css里的li:hover改变里面的a?答:这样让css里的li:hover改变里面的a:按住delete键CSS3 中 ul li:hover 上的背景颜色填充错误?
【中文标题】CSS3 中 ul li:hover 上的背景颜色填充错误?【英文标题】:Wrong padding for background color on ul li:hover in CSS3? 【发布时间】:2012-07-06 17:55:45 【问题描述】:我尝试使用 CSS 设计一个带有 HTML 表格的水平菜单栏。但是 padding 并没有像我认为的那样工作:当我试图改变整个 li 的背景颜色时,当用户用鼠标“悬停”它时。但是填充似乎出错了。
这是我的 CSS 代码(使用 Sassy CSS):
/* just to be sure the default of browser doesn't change look */
*
margin:0;
padding:0;
/* some other design code ... */
#nav-menu
padding:5px;
text-align:center;
/* change background: browser specific gradient */
background:$menu-bgcolor;
li
list-style:none;
display:inline;
padding:2px 10px 2px 10px;
:hover
background-color:$deco-dark;
color:$deco-verylight;
但结果如下所示:
如您所见,更改的背景颜色(在本例中为 $deco-dark
)不会影响整个 li
区域(具有渐变的区域),正如我所期望的那样。我可以做些什么来改变这种行为?
【问题讨论】:
您使用的是表格还是 UL?您的 css 表示 UL,但您的问题描述为 table。 【参考方案1】:使用 SASS,如下:
li
:hover
将样式应用于任何:hover
元素内部 li
。你需要的是
li
&:hover
当li
元素悬停时,它会将样式应用到它本身。目前,该样式可能仅应用于li
中的a
。
【讨论】:
谢谢,这为我指明了正确的方向并解决了我不明白的要点。我真的不知道'&'运算符的那些东西......但现在我想通了!又是坦克! :)【参考方案2】:尝试将您的 li 改为 display: inline-block;
。
【讨论】:
我做了,但还是有同样的问题。 嗯,看起来您的填充没有被应用,因为它不是块元素。尝试 display:block 和 float:left 为 li 的。并添加溢出:自动;到 #nav 菜单。如果正在应用它,那么只需将顶部和底部填充从 2px 增加到它需要的任何值。 太复杂了。见上文。【参考方案3】:您也可以在 li 中放置锚点,然后相应地设置锚点的样式。这是我通常做的。另外,就像 Brant 所说,您使用的是列表还是表格?一个列表可能会更好,并且是您已经实现的,所以只需使用它。
【讨论】:
以上是关于怎么让css里的li:hover改变里面的a的主要内容,如果未能解决你的问题,请参考以下文章
CSS3 中 ul li:hover 上的背景颜色填充错误?
很多页面使用一个共同的css样式,怎么局部改变其中一个,而使其它保持不变?怎样用css继承实现呢?