css - 无法使用 Joomla 龙门更改 nav.menu 中悬停的链接颜色

Question

(大家好!)

我正在使用 Joomla 和 gantry 主题创建一个小型网站。我正在使用 RokNavMenu，我希望它的元素在鼠标悬停时改变颜色。

我已将更改添加到我的自定义 .css 文件中:

ul.nav.menu > li:hover a {
color: #8cc414;
}

但这并没有改变任何东西。 我试过这个(只是作为测试):

ul.nav.menu > li:hover a {
color: #8cc414;
font-size: 24px;
font-weight: bold;
background: #DA0429;
}

我很惊讶地看到字体大小、粗细和背景颜色都被考虑在内，但字体颜色本身仍然没有。

所有这些 :hover block 都在 :active block 之前，因为我已经看到顺序可能很重要。

在我变得非常疯狂之前，你能帮帮我吗？ 非常感谢，

斯蒂芬妮

附注好的，感谢 Vitorino，它现在可以工作了——我不得不添加 !important——但是为什么要覆盖颜色？我必须把这个 block 放在别处吗？ 这是关于导航菜单的整个 block : 这是导航菜单的整个 block :

/* pour les menus RoknavMenu "user menu" */
ul.nav.menu > li a {
    color: #6e6e6e;
    font-size: 12px;
   font-weight: normal;
}

/* en survol */
ul.nav.menu > li:hover a {
    color: #8cc414 !important; /* important a dû être ajouté car sinon overriden */
}

/* élément actif  */
ul.nav.menu > li.active a {
    color: #8cc414;
    font-size: 12px;
   font-weight: normal;
}

/* style de puce devant un élément de menu de navigation user inactif */
ul.nav.menu > li a::before {
    content: " ";
}

/* style de puce devant un élément de menu user ACTIF */
ul.nav.menu > li.active a::before {
    content: "\273F \ ";
}

再次感谢:)

Answer 1

首选方法是通过包含您要覆盖的类的 #parentdivid 来使用特定于 id 的覆盖。

使用 !important 不是推荐的覆盖方法。

例如:

/* en survol */
#rt-roknav ul.nav.menu > li:hover a {
    color: #8cc414;
}

有关 Gantry 覆盖的更多信息，请访问其网站上的文档:

http://docs.gantry.org/gantry4/tutorials/adding-a-custom-stylesheet