Menu options changing color on Hover

  • I am new to web development and trying to manipulate a template to look how I want it.

    O have changed the menu background from White to Blue and changed the letter color from Dark Grey to White.

    I have also added a line so that when I hover over a link in the menu that the letters of that link change from white to red. However, this works for the most part, although the home link changes colour when I hover over other links in the menu.

    Below is the cde that has been used:

    .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
    color: #fff;
    }
    .navbar-inverse:hover .navbar-nav:hover > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse:hover .navbar-nav:hover > .active > a:focus {
    color: #f40000;
    }

    Any help would be much appreciated

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter paulmcf87

    (@paulmcf87)

    I have just noticed, after playing about that it is not only the home page that does this.
    for example my menu has 3 tabs at present. Home / Blog / About

    If i am on the home page and hover over Home, only that text changes color, however if i hover over Blog or About, Both the tab I am hovering over and the Home tab change colour.

    Similarly, if i am on the blog page and hover over Blog, only that tab changes color. However, if i hover over Home or About, both the tab I am hovering over and the blog tab change color.

    so it appears that the tab for the current page I am on and the tab I am hovering over both change colour.

    I hope this makes sense. I apologise for any confusion I may cause

    Moderator bcworkz

    (@bcworkz)

    Heh, while what’s happening is hard to explain, the cause is actually simple. Unfortunately, the solution may not be so simple.

    Something hard to explain can be easily resolved by a live link to the page in question. Then you just have to tell us to hover over one thing and see what happens at another.

    When you hover over an element, anything else matching any of the selectors will also have the same rule applied. For whatever reason, when you hover over a menu item, the other item changing colour is also matching a selector in the group.

    The solution is to adjust things so undesirable colour changing does not happen. Changing the class of the problem element will do it, but probably break other menu functions. You can alter the selectors so they are more specific so that undesirable elements will not match. This too can break other menu functions. It can be a frustrating process.

    Make use of your browser’s developer tools. Use the CSS analyser to try different selector variations until you get the results you want. Test thoroughly to ensure your changes don’t have adverse impacts elsewhere. Once you’re satisfied, copy your changes to the appropriate locations in the CSS files.

    By providing a live link, other’s can try the same process and perhaps offer a solution.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Menu options changing color on Hover’ is closed to new replies.