关于悬停的CSS菜单问题

我有一个包含四个项目的菜单，每个菜单都有不同的颜色。关于悬停的CSS菜单问题

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

来源

2014-04-24 user3482036

我会带填充关闭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>标签。

来源

2014-04-24 17:30:53 MyCompassSpins

您可以用这个悬停：

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

要花两个li元素的关怀和其子锚定位时li悬空

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

来源

2014-04-24 17:26:35

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

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

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

来源

2014-04-24 17:31:48 IglooWhite

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; 
}

来源

2014-04-24 17:34:32

关于悬停的CSS菜单问题

回答

相关问题