0

我想为我正在构建的网站添加一个选项卡式外观。已经这样做了，但现在我想根据我所在的选项卡更改选项卡颜色，这也没有问题，除了颜色。

似乎代码也使用了菜单的默认背景颜色。

我的菜单包含在：

#container #menu ul li {
background: rgba(0, 0, 0, 0.8);
float: left;
position: relative;
list-style-type: none;
}

我建立了一个类 .onlink 来确定我是哪个页面，并使用它来显示正确的颜色：

#container #menu ul li a.onlink{
background-color: rgba(255, 255, 255, 0.9);
color:#000;
background: rgba(255, 255, 255, 0.9);
}
#container #menu ul li a.onlink:hover{
background: rgba(255, 255, 255,0);
}

当我将鼠标悬停在菜单栏上时，颜色是正确的，但是当不悬停在菜单栏上时，颜色会稍微偏离（灰色），并且似乎是#container #menu ul li id 的一个人工制品。

关于如何调整不悬停颜色的任何建议？

4

3 回答 3

0

Thanks for the input; your comment on the :hover set me on the right track. because the :hover line defines the background color. In my code i only defined the background color of the function , not of the block.

I actually added the class .onlink also to the list: 

#container #menu up li.onlink{ 
background: rgba (255,255,255, 0.9) 
}

This resulted in a correctly displayed effect. Thanks for the suggestions.

于 2013-09-13T14:43:44.757 回答
0

从外观上看（尽管我不完全确定），您似乎想要一个透明的背景色，而不是部分透明的白色背景色；既然如此：

#container #menu ul li a.onlink {
    background-color: transparent;
    color:#000;
    background: rgba(255, 255, 255, 0.9);
}
#container #menu ul li a.onlink:hover {
    background-color: transparent;
}

background-color 当然，上述内容意味着悬停状态和非悬停状态之间没有区别，因此:hover可以从样式表中完全省略规则（第二个）（假设这background-color是该选择器中包含的唯一属性），只给：

#container #menu ul li a.onlink {
    background-color: transparent;
    color:#000;
    background: rgba(255, 255, 255, 0.9);
}

当然，您可以保留rgba()颜色符号，并简单地将 alpha（四个数字中的第四个（其他分别为红色、绿色和蓝色）保持为0（完全透明），而不是0.9（90% 不透明/几乎完全可见） ））：

#container #menu ul li a.onlink{
    background: rgba(255,255,255,0);
    color:#000;
    background: rgba(255, 255, 255, 0.9);
}
于 2013-09-12T22:08:04.507 回答
0

尝试删除：background-color: rgba(255, 255, 255, 0.9);

于 2013-09-12T22:14:15.500 回答