css - 将鼠标悬停在导航链接上时，Zurb Foundation Rails Topbar Nav 黑色突出显示

Question

我在使用 Zurb Foundation 时遇到问题，默认情况下，将鼠标悬停在顶部导航栏链接上会以黑色突出显示菜单。

这在使用默认菜单颜色 #111 时很好，但在使用其他颜色时会出现问题。

我想做的是完全阻止任何突出显示。我不希望鼠标悬停在菜单上时颜色发生任何变化。

过去几天我一直在研究这个问题，并尝试对文件进行多次更改，但无济于事。

我是编码新手，非常欢迎任何帮助。

为了举例说明我所描述的内容，这里有一个应用程序的 Heroku 部署链接，我很快就把它放在一起，以便向我的姐夫介绍 Rails，以便他可能会考虑学习它:

http://vast-headland-1673.herokuapp.com/

当您将鼠标悬停在顶部导航栏的菜单项上时，Heroku 部署说明了我所描述的内容。

这里是 github 存储库的链接:

https://github.com/marcacyr/Fernando-s-Sample-App

谢谢!

Answer 1

如果您不希望鼠标悬停在菜单上时颜色发生变化。看到这个样式悬停在你的 tobar 上

.top-bar-section li a:not(.button):hover {
background: #000;
}

.top-bar-section li a:not(.button):hover {
background: #000;
}

.top-bar-section ul li>a:hover {
background: #2b2b2b;
}

.top-bar-section ul li>a:hover {
background: #2b2b2b;
}

你可以把background:#000和background:#2b2b2b改成background:#3b5999，添加一个css文件(例如a.css), 然后把这个:

/* for dropdown */
.top-bar-section ul li.has-dropdown ul li>a:hover {
background: #4264ab;
}

/* for topbar */
.top-bar-section li a:not(.button):hover {
background: #3b5999;
}

.top-bar-section li a:not(.button):hover {
background: #3b5999;
}

.top-bar-section ul li>a:hover {
background: #3b5999;
}

.top-bar-section ul li>a:hover {
background: #3b5999;
}

在你的 layouts/application.html 上调用 a.css 看起来像

<%= stylesheet_link_tag    "application", "a" %>