How can I disable my css sprite nav bars hover state for a section while it is active?


Tags: php,jquery,html,css

Problem :

I have been developing a website that makes use of a css sprite nav bar.

The css for one section which is already set as active follows.

ul#navigation li#navigation-1 a
{
background:url(images/btn_navbar.png) no-repeat -1px 0;
width:90px;
}

ul#navigation li#navigation-1 a.current
{
background-position:-1px -90px;
}

ul#navigation li#navigation-1 a:active,ul#navigation li#navigation-1 a:hover
{
background-position:-1px -45px;
}

I set the active state for the other sections using the following HTML/PHP

<li id="navigation-8"><a href="<?php $page = get_page_by_title('Contact'); echo get_permalink ($page ->ID); ?>" title="CONTACT" <?php if ( is_page('Contact')) { echo 'class="current"' ; } ?>><span>CONTACT</span></a></li>

The problem is that the current 'active' section still has the :hover property which leads to a flicker and unwanted removal of the active state until the mouse leaves the section.

Ideally I would like to simply remove the hover property for the currently selected section.

How is this possible? could I do some jquery wizardry?

Many thanks.

Robert



Solution :

You can specify the psuedo classes for the "current" link:

#navigation-1 a.current,
#navigation-1 a.current:hover,
#navigation-1 a.current:active {
    background-position:-1px -45px;
}

I also recommend you put these below the other #navigation-1 a styles as well, as they will override the styles they inherit from those.

I want to point out that there is no need to write a selector with 2 ids. Ids are always unique, so there's no need to even specify an element either because there will never be two of them (with valid html).

These are all the same (assuming your markup stays the same and you have no unused css):

ul#navigation li#navigation-1{}
#navigation li#navigation-1{}
#navigation-1{}

    CSS Howto..

    How to access CSS on img tag

    How do you select a security authentication modal with a css selector?

    how to display nav elements below each other inside of a header element

    How to select div with id nested in another div with class in css

    how do I get my background to stretch the entire page

    How to load local copy of bootstrap css when the cdn server is down?

    How to center [image + text] of unknown width?

    How to attach an element on the dynamically created div

    How to make a new class

    How to make a border in css that is actually on the very edges

    How to manage assets for modern/ancient browsers

    when users upload an image how can i use css to minimize skewing?

    How to not apply a webpage's CSS on the div I am inserting into it via content scripts?

    How to extend css class

    How to re-size an image inserted via tag?

    How to <%= link_to %> entire area of
  • in Ruby on Rails
  • How to embed Javascript in CSS?

    How do I make an entire
  • element a link?
  • How to switch left and right in a css file?

    How to position heading (h1) placed on a background image and centered according to it outside of its container

    How to make an text float next to an image in HTML/CSS?

    how can I overcome existing css and change button style to the default windows style button?

    How do I make a DIV tag stretch to the size of it's children?

    CSS float property shows no height?

    how to check css is valid for IE8

    How to make 2 backgrounds “stick” to the sides of a centered div

    how to set individual scroll for content and left menu

    Using jquery to swap text, how to revert other text to original?

    How to dynamically add a class to li item and change its background color using javascript and css

    How to create custom CSS “on the fly” based on account settings in a Django site?