1

我正在尝试将 a:hover 悬停在我创建的菜单上。如果你能帮助我，我真的很感激！我试图实现的是在整个酒吧中获得黑色。如果你明白我的意思。

这是菜单：（黑色是悬停） 在此处输入图像描述

所以这是我的菜单CSS：

#navigation {
padding: 5px;
height: 1em;
width: auto;
text-align: center;
font-family: Verdana;
font-size: 12px;
text-transform: uppercase;
margin-top: -5px;
}

#navigation ul {
background-color: #fff;
width: 1000px;
margin-left: -5px;
}

#navigation li {
float: left;
list-style: none;
width: 100px;
background-color: #fff;
padding: 10px;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.235), 0px 0px 5px rgba(0, 0, 0, 0.047);
}

#navigation li ul {
padding: 5px;
display: none;
width: em;
background-color: #fff;
}

#navigation li a:hover {
background-color: #000;
padding:10px;
width: 300px;
color: #fff;
position:absolute;
}

#navigation a { 
color: #000;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

#navigation a:link {    
color: #000;
}

#navigation a:hover {   
color: #fff;
background-color: #000;
}

#navigation a:visited { 
color: #000;
}

因此，如果您需要有关此的更多信息，只需访问我的网站，您可以在其中自己查看问题。http://tomaswebdesign.com

4

2 回答 2

4

您有两个选项，第一个是最简单的，只需将其添加:hover到li自身：

li:hover,
a:hover  {
    color: #fff;
    background-color: #000;
}

JS 小提琴演示。对于上述解决方案，我还建议您color: inherit在a元素上设置（而不是在链接演示中a:hover）

第二个是将样式设置a为块元素：

a {
    display: block; /* to fill the available horizontal space */
    height: 100%; /* to fill the available vertical space */
}

但是，这确实需要您padding从li元素中删除，因为这就是“迫使”background-color远离元素边缘的原因，因此：

li {
    padding: 0;
}

li a {
    padding: 10px; /* so that the padding is preserved, albeit
                      on the a element instead */
    display: block; 
    height: 100%; 
}

JS 小提琴演示。

于 2012-11-24T12:23:58.020 回答
0

试试这个

#navigation li {
    display:block;
    float: left;
    list-style: none;
    width: 100px;
    background-color: #fff;
    padding: 10px;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.235), 0px 0px 5px rgba(0, 0, 0, 0.047);
}

或者您可以将锚点设置width为height100%。

于 2012-11-24T12:28:52.070 回答