CODEWITHSUNDEEP
cssnavigationhover
Mr.Syrax
Mr.Syrax

Reputation: 414

hide hover effect on current page

I am practicing on HTML and CSS and can't seem to figure this one out. I have a horizontal menu with 5 items. I have a hover state assigned and css to highlight the current page on the nav bar. What I want is when you hover over the current page for it to NOT have a hove effect. Here is the css involved

                .nav {
                width: 960px;
                height: 40px;
                background-color: #6d6e70;
                margin: 210px auto;
                position: absolute;
            }
            .nav li {
                width: 192px;
                text-align: center;
                display: inline;
                float: left;
                line-height: 40px;
                display: block;
                margin: auto;
                padding: 0px;
            }
            .nav li a {
                text-decoration: none;
                color: #434244;
                font-size: 20px;
            }
            .nav li a:hover {
                color: #fff;
                text-shadow: 0px 0px 5px #fff;
            }
            body#home a#homeNav,
            body#products a#productsNav,
            body#aboutUs a#aboutUsNav,
            body#contactUs a#contactUsNav,
            body#order a#orderNav {
                color: #6d6e70;
                background: #434244;
                padding: 5px 6px 6px 6px;
            }

Any suggestions?

Upvotes: 0

Views: 2554

Answers (3)

hungerstar
hungerstar

Reputation: 21725

I HIGHLY RECOMMEND THE USE OF A .active CLASS AS STATED IN THE OTHER ANSWERS

If for some reason you are not able to do some server side or client side processing to add the .active class you could do some targeting through the IDs that you have posted in the original code. This would be for a static site that doesn't have access to any server side or client side scripting.

This approach is not the best and should be supplemented with something else if at all possible. It will get unwieldy if you have a lot of pages as you have to add each page to the CSS and is quite redundant but does work if you cannot do it by previously stated means.

What you need to do is use a combination of your page IDs with your link IDs.

http://jsfiddle.net/GJ6Ft/2/

(Ignore the jQuery in the jsFiddle)

Example HTML

<ul>
    <li id="OneLink"><a href="#">One</a></li>
    <li id="TwoLink"><a href="#">Two</a></li>
    <li id="ThreeLink"><a href="#">Three</a></li>
    <li id="FourLink"><a href="#">Four</a></li>
    <li id="FiveLink"><a href="#">Five</a></li>
</ul>

CSS

/* Current navigation link color */
#One #OneLink a,
#Two #TwoLink a,
#Three #ThreeLink a,
#Four #FourLink a,
#Five #FiveLink a {
    color: red;
}
/* Default link background color */
ul > li {
    background-color: blue;
}
/*  Don't highlight current link background color - same as original */
#One #OneLink:hover,
#Two #TwoLink:hover,
#Three #ThreeLink:hover,
#Four #FourLink:hover,
#Five #FiveLink:hover {
    background-color: blue;
}
/* When any link is hovered, change background color */
ul > li:hover {
    background-color: black;
}
/* Default link color */
ul li > a {
    color: white;
}

Upvotes: 1

Chinmay235
Chinmay235

Reputation: 3414

Some changes in your html code

If your home page is current please make a class="active" in your home menu.

<li><a href="#" class="active">HOME</a></li>

Add one class .active in your css code

.nav li a.active, 
.nav li a.active:hover {
    text-shadow: 0px 0px 5px #ccc;
    color:#cccccc;
}

Upvotes: 1

Hashem Qolami
Hashem Qolami

Reputation: 99544

Add a .active class to the current page link, and override the styles like:

.nav li a.active, 
.nav li a.active:hover {
    /* Put your CSS declarations here, like: */
    text-shadow: none;
}

Upvotes: 2

Related Questions