悬停时的 CSS 菜单问题答案

【问题标题】：CSS Menu issue on hover悬停时的 CSS 菜单问题
【发布时间】：2014-06-10 03:16:27
【问题描述】：

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

我的挑战是在悬停时使每个项目变暗，我知道我可以使用不透明度来实现这一点，但在此之前，每次我将鼠标悬停在其中一个项目上时，它只会突出显示其中的一部分并跳过填充。我知道这是一个愚蠢的问题，但这是我自 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}

【问题讨论】：

标签： css html menu hover

【解决方案1】：

你可以用它来悬停：

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

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

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

【讨论】：

【解决方案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> 标记。

【讨论】：

【解决方案3】：

虽然有很多方法可以解决这个问题，但问题的根源在于，当您一次性设置li 和li 的样式时，您同时填充了容器和其中的链接。你剩下的是一个a 标记，它在具有填充的li 内部具有填充，并且li 标记的填充是不变的颜色。通过添加：

.menu-bar-menu li{
     padding:0;
     margin:0;
}

在您拥有声明之后，您可以解决此问题，或者简单地将您的声明分开以使其更加明显。此外，当有疑问时，像 Firefox 的 Firebug 扩展这样的工具将是您最好的朋友。您可以启动它，然后单击页面中的某个项目以查看影响该确切部分的样式...有时仅当您四处移动时突出显示/边框就足以让您看到正在发生的事情。

【讨论】：

【解决方案4】：

Yoy 需要对要应用悬停动作的元素应用填充。这是您更新的代码。访问此链接：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;
}

【讨论】：