Zurb基金会栏杆顶部导航黑色突出显示时悬停在导航链接 [英] Zurb Foundation Rails Topbar Nav black highlighting when hovering over nav link

问题描述

我有一个问题，Zurb基金会，悬停在顶部的导航栏链接突出显示菜单黑色默认情况下。

I'm having an issue with Zurb Foundation where hovering over the top navbar links highlights the menu in black by default.

使用默认菜单颜色＃111时很好，但在使用其他颜色时有问题。

This is fine when using the default menu color #111, but is problematic when using other colors.

我想做的是防止任何突出显示。

What I want to do is prevent any highlighting at all. I don't want the colors to change at all when hovering over the menu.

我已经研究过这几天的这个问题，并尝试了大量的文件更改无效。

I have researched this problem for the past few days and have tried numerous changes in the files to no avail.

我是一个新的编码，任何帮助将是非常欢迎。

I am new to coding and any help would be very welcome.

例子我的描述，这里是一个应用程序的Heroku部署的链接，我一起很快把我的婆婆介绍给Rails，以便他可以考虑学习它：

To give an example of what I'm describing, here is a link to the Heroku deployment of a app I threw together very quickly to introduce my bro-in-law to Rails so that he might consider learning it:

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

当您将鼠标悬停在顶部栏导航栏上的菜单项时，Heroku部署演示了我在说什么。

That Heroku deployment illustrates what I'm describing when you hover over the menu items on the top bar nav.

以下是指向github存储库的链接：

Here is a link to the github repository:

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

谢谢！

推荐答案

如果您不希望颜色在悬停在菜单上时发生变化。
查看此样式悬停在您的tobar上

If you don't want the colors to change at all when hovering over the menu. See this style hover on your 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;
}

您可以更改背景：＃000 和 background：＃2b2b2b 到 background：＃3b5999 ，添加一个css文件$ c> a.css ），然后输入：

You can change background:#000 and background:#2b2b2b to background:#3b5999, add one css file (e.g a.css), and put this :

/* 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 call a.css看起来像

And on your layouts/application.html call a.css looks like

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

这篇关于Zurb基金会栏杆顶部导航黑色突出显示时悬停在导航链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！