怎么让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样式,怎么局部改变其中一个,而使其它保持不变?怎样用css继承实现呢?

css里如何让div水平平均分布以至于放大缩小界面都不会改变位置

c# 如何改变datagridview里的字体颜色

如何监听div内容的改变?