Question

我想在我正在构建的网站上添加标签外观。已经这样做了，但现在我想根据哪个标签更改标签颜色，这也没问题，除了颜色。

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

我的菜单包含在：

中

#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的艺术品。< / p>

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

Answer 1

从它的外观（虽然我并不完全确定），你似乎想要一个透明的背景色，而不是一个部分透明的白色背景色;既然如此：

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

Answer 2

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

Answer 3

感谢您的投入;你对以下内容的评论：悬停让我走上正轨。因为：悬停线定义了背景颜色。在我的代码中，我只定义了函数的背景颜色，而不是块的背景颜色。

我实际上也将类.onlink添加到列表中：

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

这导致正确显示效果。感谢您的建议。

标签菜单的css样式，背景颜色

3 个答案: