Question

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

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>

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

我想更改内容+填充的背景颜色。

Answer 1

我建议将填充声明移到a元素，将它们显示为块元素，并将li显示为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/

Answer 2

我相信你的css悬停链接有点偏。

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

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

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

Answer 3

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

链接为按钮状外观

3 个答案: