Question

我有一个包含四个项目的菜单，每个菜单都有不同的颜色。

我的挑战是在悬停时使每个项目变暗，我知道我可以使用不透明度实现此目的但在此之前，每次我将鼠标悬停在其中一个项目上时，它只会突出显示其中的一部分并跳过填充。我知道这是一个愚蠢的问题，但这是我自1999年以来的第一份前端工作：）

请你帮我理解这里有什么问题？谢谢大家。

这是菜单结构

  <div class="menu-bar-inner">
  <ul class="menu-bar-menu">
  <li class="color1"><a href="">Item 1</a></li>
  <li class="color2"><a href="">Item 2</a></li>
  <li class="color3"><a href="">Item 3</a></li>
  <li class="color4"><a href="">Item 4</a></li>
  </ul>

这是我的CSS

 .menu-bar-menu li, .menu-bar-menu li a {

list-style: none;
float: left;
padding: 6px 20px 7px 20px;
text-align: center;
text-decoration: none;
color: #ffffff;
font-size: 16px;
font-weight: 400;
background-color: #ce5043
}


.menu-bar-menu li a:hover {   
background-color: black;
}



.color1 {background-color: #ce5043}
.color2 {background-color: #fb8521}
.color3 {background-color: #444444}
.color4 {background-color: #b3c833}

Answer 1

您可以将其用于悬停：

.menu-bar-menu li:hover, .menu-bar-menu li:hover a {   
    background-color: black;
}

当li悬停时，它会处理li元素及其子锚点

演示：http://jsfiddle.net/DajQ9/1/

Answer 2

我从li元素中取出填充，然后将其放在a元素上。另外，将a设置为display: block;，因此它占据其父li的整个高度和宽度。像这样：

.menu-bar-menu li, .menu-bar-menu li a {
        list-style: none;
        float: left;
        text-align: center;
        text-decoration: none;
        color: #ffffff;
        font-size: 16px;
        font-weight: 400;
        background-color: #ce5043
    }

    .menu-bar-menu li a {
        display: block;
        padding: 10px 20px;
    }

这是一个小提琴：http://jsfiddle.net/82uyt/

此外，您错过了结束</div>代码。

Answer 3

虽然有很多方法可以解决这个问题，但问题的根源在于，当您为li和{{1}设置样式时，您将填充容器及其中的链接。一次性拍摄。您还剩下的是li标记，其中a内部有填充，并且有填充，li标记的填充是不变的颜色。添加：

li

在您拥有声明之后，您可以解决此问题，或者只是将您的声明分开以使其更加明显。此外，如果有疑问，像Firefox的Firebug扩展工具将是你最好的朋友。您可以启动它，然后单击页面中的某个项目以查看影响该确切部分的样式...有时只需突出显示/边框就可以让您看到发生了什么。

Answer 4

您需要将padding应用于要应用悬停操作的元素。这是您的代码更新。请访问此链接：http://jsfiddle.net/dnPmE/1/

的CSS：

.menu-bar-menu li, .menu-bar-menu li a {
    list-style: none;
    float: left;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
}
.menu-bar-menu li a{
padding: 12px 40px 14px 40px;    
}
.menu-bar-menu li a:hover {
    background-color: black;
}
.color1 {
    background: #ce5043;
}
.color2 {
    background: #fb8521;
}
.color3 {
    background: #444444;
}
.color4 {
    background: #b3c833;
}

悬停时的CSS菜单问题

4 个答案: