链接为类似按钮的外观答案

【问题标题】：Link as a button-like appearance链接为类似按钮的外观
【发布时间】：2014-09-11 04:11:20
【问题描述】：

当鼠标悬停在水平导航栏中的链接上时，如何更改链接（显示为按钮）的背景颜色？

HTML代码

  <head>

         <style>

                #menu li 
                {
                     display:inline;
                     border-style:solid;
                     boreder-top : none;
                     border-bottom : none;
                     margin-right : -8px;
                     padding-top : 0px;
                     padding-bottom : 0px;
                     padding-left : 25px;
                     padding-right : 25px;
                 }

                 #menu li a:hover{background-color:#00FFFF;}
         </style>

  </head>

  <body>
        <div id="menu">
              <ul class="nav">
                   <li><a href="index.php">Home</a></li>
                   <li><a href="college.php">College</a></li>
                   <li><a href="education.php">Education</a></li>
                   <li><a href="research.php">Research</a></li>
                   <li><a href="faculty.php">Faculty & Staff</a></li>
                   <li><a href="news.php">News</a></li>
              </ul>
         </div>
   </body>

当我将鼠标悬停在导航栏中的链接上时，它只会改变内容区域的背景颜色。它忽略了填充区域。

我想改变内容的背景颜色+内边距。

【问题讨论】：

请在JSFiddle上提供您的代码
这是因为:hover 在a 而不是li。
我已经用整个代码编辑了我的问题。谢谢

标签： css navigation hover

【解决方案1】：

我建议将填充声明移动到a 元素，将它们显示为块元素并将lis 显示为inline-block。

#menu li {
    display : inline-block;
    border-style : solid;
    boreder-top : none;
    border-bottom : none;
    margin-right : -8px;
    padding-top : 0px;
    padding-bottom : 0px;
}

#menu li a {
    display: block;
    padding-left : 25px;
    padding-right : 25px;
}

#menu li a:hover{ 
    background-color:#00FFFF;
}

演示：http://jsfiddle.net/sK2d9/

【讨论】：

【解决方案2】：

我相信你的 CSS 悬停链接有点不对。

如果你给你的按钮一个菜单id，那么css格式应该是这样的：

.menu:hover {
background-color:#00FFFF;
}

试试看，我能想到的可能是错的，但是是的。

【讨论】：

是的，CSS 悬停有点不对劲。谢谢。

【解决方案3】：

您必须将鼠标悬停在<li></li>。
默认情况下，CSS 也会改变填充区域的颜色。
像这样：[ LINK ]

【讨论】：

非常感谢你。完美运行