Zurb Foundation Rails Topbar Nav black highlighting when hovering over nav link

问题

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

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.

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/

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

Here is a link to the github repository:

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

Thank you!

回答1:

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

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

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

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

来源：https://stackoverflow.com/questions/17386362/zurb-foundation-rails-topbar-nav-black-highlighting-when-hovering-over-nav-link

标签

css

ruby-on-rails

navigation

zurb-foundation