带有悬停功能的 CSS 菜单答案

【问题标题】：CSS Menu with Hover带有悬停功能的 CSS 菜单
【发布时间】：2013-06-24 19:24:26
【问题描述】：

我正在尝试将我的菜单链接设为#666666，然后将hover 设为#FFFFFF

我希望 text colour 和 top border 上的这些颜色发生变化

#topbar {
    width:100%;
    height:80px;
    background-color:#000000;
}
#topbar-inner {
    width:1000px;
    margin:0 auto 0 auto;
}
#logo {
    display:inline;
    float:left;
    margin-top:20px;
}

#menu {
    display:inline;
    float:right;
}
#menu > ul > li {
    display:inline-block;
    border-top:4px solid #666666;
    margin-right:20px;
    padding-top:20px;
    min-width:120px;
}
#menu > li {
    display:inline-block;
    list-style:none;
    margin-top:25px;
    margin-left:auto;
    margin-right:auto;
}
#menu > li:hover {
    color:#FFFFFF;
}

【问题讨论】：

我妈妈总是告诉我"want" is dead, even inside the king's garden（我猜这个英文翻译得不好，但仍然......）
How to change the link color in a specific class for a div CSS的可能重复
从您的 CSS 外观来看，您可能应该阅读这篇文章。它会解释你为什么会出现这个问题：link

标签： css

【解决方案1】：

选择器应该是

#menu li a {
    color: #666;
    display: block;
}
#menu li:hover {
    border-top-color: #FFF;
}
#menu li:hover a {
    color:#FFFFFF;
}

#menu 没有直接的 li 后代，因此 #menu > li:hover 不匹配任何内容。

http://jsfiddle.net/4Xdkn/8/

【讨论】：

哇，这么多答案。但你是第一个。恭喜！（我现在可以删除我更新的小提琴。）
此解决方案存在问题，当您将鼠标悬停在 li 上时，它会更改颜色和背景，但您无法单击它，因为 a 标记未设置为display:block，我个人认为这不是最好的解决方案。
非常好 - 谢谢。当它没有悬停时，我怎样才能使文本颜色#666666？

【解决方案2】：

你的 CSS 有错误

#menu > li 不针对任何对象，因为#menu 应用于div，并且它没有li 类型的直接子代。

使用这些规则

#menu li {
    display:inline-block;
    border-top:4px solid #666666;
    margin-right:20px;
    padding-top:20px;
    min-width:120px;
}
#menu li:hover, 
#menu li:hover a {
    color:#FFFFFF;
}
#menu li a {
    color:#666666;
}
#menu li:hover {
    border-color:#FFFFFF;
}

http://jsfiddle.net/gaby/4Xdkn/4/的演示

【讨论】：

【解决方案3】：

Updated Fiddle

你需要添加：

#menu li a {
     display:block; 
     padding-top:25px;   
     border-top:4px solid #666666;
 }
#menu 
     li a:hover { 
      border-color:red; 
      color:#fff
 }

在#menu > ul > li 上删除border-top 和padding，因为它们现在已添加到a 标记中。

在#menu > li 上删除margin-top 属性

【讨论】：

【解决方案4】：

试试下面的css

       #topbar {
     width:100%;
     height:80px;
     background-color:#000000;
        }
       #topbar-inner {
     width:1000px;
     margin:0 auto 0 auto;
        }
       #logo {
     display:inline;
     float:left;
     margin-top:20px;
        }

      #menu {
     display:inline;
     float:right;
            }
       #menu > ul > li {
       display:inline-block;    
       margin-right:20px;   
       min-width:120px;
            }
       #menu > li { 
       list-style:none;
       padding:25px 0 0 0;
       margin-left:auto;
       margin-right:auto;
           border-top:1px solid #fff;
           }
        #menu ul li a:hover {
        color:#FFFFFF;
           }
       #menu li a {display:block; padding:20px 0 0 0;border-top:4px solid #666666;}
       #menu li a:hover { border-top:4px solid #fff; color:#fff}

【讨论】：

【解决方案5】：

试试这个

http://jsfiddle.net/4Xdkn/7/

#topbar {
    width:100%;
    height:80px;
    background-color:#000000;
}
#topbar-inner {
    width:1000px;
    margin:0 auto 0 auto;
}
#logo {
    display:inline;
    float:left;
    margin-top:20px;
}

#menu {
    display:inline;
    float:right;
}
#menu > ul > li {
    display:inline-block;
    border-top:4px solid #666666;
    margin-right:20px;
    padding-top:20px;
color:#ffffff;
    min-width:120px;
}
#menu > li > a {
    display:inline-block;
    list-style:none;
    margin-top:25px;
    margin-left:auto;
    margin-right:auto;
     text-decoration:none;
    color:#ffffff;
    text-decoration:none;
}

#menu li:hover {
    color:#FFFFFF !important;
    text-decoration:none;
    border-top:4px solid #ffffff;
    display:inline-block;
}
#menu li a:hover{
    color:#ffffff;
    text-decoration:none;
}
}

【讨论】：

【解决方案6】：

为 a 元素着色而不是 li，并使 a 元素与 li 一样大。

#menu li a:hover {
    color:white;
    border-style:solid;
    border-width: 1px 0px 0px 0px;
    border-color:white;
}

【讨论】：