我在使用 Zurb Foundation 时遇到问题,默认情况下,将鼠标悬停在顶部导航栏链接上会以黑色突出显示菜单。
这在使用默认菜单颜色 #111 时很好,但在使用其他颜色时会出现问题。
我想做的是完全阻止任何突出显示。我不希望鼠标悬停在菜单上时颜色发生任何变化。
过去几天我一直在研究这个问题,并尝试对文件进行多次更改,但无济于事。
我是编码新手,非常欢迎任何帮助。
为了举例说明我所描述的内容,这里有一个应用程序的 Heroku 部署链接,我很快就把它放在一起,以便向我的姐夫介绍 Rails,以便他可能会考虑学习它:
http://vast-headland-1673.herokuapp.com/
当您将鼠标悬停在顶部导航栏的菜单项上时,Heroku 部署说明了我所描述的内容。
这里是 github 存储库的链接:
https://github.com/marcacyr/Fernando-s-Sample-App
谢谢!
最佳答案
如果您不希望鼠标悬停在菜单上时颜色发生变化。 看到这个样式悬停在你的 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" %>
关于css - 将鼠标悬停在导航链接上时,Zurb Foundation Rails Topbar Nav 黑色突出显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17386362/