Trying to change navigation items background image with :hover on another pseudo class

Question

I was working on this site MY Site . as you scroll down you can see the sticky navigation menu with background images for each item.I have managed to add the images using the following css.

 header.sticky nav.main_menu > ul > li:nth-child(1)
 {
background-image:url('../img/OUTNOW.png');}
header.sticky nav.main_menu > ul > li:nth-child(2) 
{
background-image:url('../img/ARTIST.png');}
header.sticky nav.main_menu > ul > li:nth-child(3) 
{
background-image:url('../img/aboutus.png');}
header.sticky nav.main_menu > ul > li:nth-child(4)
 {
background-image:url('../img/CONTACT.png');}
header.sticky nav.main_menu > ul > li:nth-child(5) 
{
background-image:url('../img/SUBMISSION.png');}
header.sticky nav.main_menu > ul > li:nth-child(6) 
{
background-image:url('../img/TV.png');}

and while hovering i need another white image with text color white.for that i added the following css

header.sticky nav.main_menu > ul > li:nth-child(1):hover
 {
background-image:url('../img/OUTNOW-h.png');
color:#fff ;
background:none ;
}
header.sticky nav.main_menu > ul > li:nth-child(2):hover
{
background-image:url('../img/ARTIST-h.png');
color:#fff ;
background:none ;
}
header.sticky nav.main_menu > ul > li:nth-child(3):hover
{
background-image:url('../img/aboutus-h.png');
color:#fff ;
background:none ;
}
header.sticky nav.main_menu > ul > li:nth-child(4):hover
 {
background-image:url('../img/CONTACT-h.png');
color:#fff ;
background:none ;
}
header.sticky nav.main_menu > ul > li:nth-child(5):hover
{
background-image:url('../img/SUBMISSION-h.png');
color:#fff ;
background:none ;
}
header.sticky nav.main_menu > ul > li:nth-child(6):hover
{
background-image:url('../img/TV-h.png');
color:#fff ;
background:none ;
}

but this is not working .I have no idea wher i went wrong.Please Help!!.Thanks !!!

my suggestion is put all images together in one, and use "background-position-x(y)" to adjust the one you want when hovering — Venzentx, Jul 26 '14 at 10:07
thats like an extra work in photoshop .. any other css help please — Melvin, Jul 26 '14 at 10:16

score 1 · Answer 1 · edited May 23 '17 at 10:25

As answered here, you can't have double pseudo classes.

My first thought was to give the li elements unique ID's. Then I realized your using a CMS that auto generates the ID's, which make that solution risky if you make changes in the CMS.

CSS

header.sticky nav.main_menu > ul > li#nav-menu-item-7549 {
    background-image:url('../img/OUTNOW.png');
}

header.sticky nav.main_menu > ul > li#nav-menu-item-3260 {
    background-image:url('../img/ARTIST.png');
}

header.sticky nav.main_menu > ul > li#nav-menu-item-7550 {
    background-image:url('../img/aboutus.png');
}

header.sticky nav.main_menu > ul > li#nav-menu-item-7551 {
    background-image:url('../img/CONTACT.png');
}

header.sticky nav.main_menu > ul > li#nav-menu-item-7486 {
    background-image:url('../img/SUBMISSION.png');
}

header.sticky nav.main_menu > ul > li#nav-menu-item-7363 {
    background-image:url('../img/TV.png');
}


header.sticky nav.main_menu > ul > li#nav-menu-item-7549:hover {
    background-image:url('../img/OUTNOW-h.png');
}

header.sticky nav.main_menu > ul > li#nav-menu-item-3260:hover {
    background-image:url('../img/ARTIST-h.png');
}

header.sticky nav.main_menu > ul > li#nav-menu-item-7550:hover {
    background-image:url('../img/aboutus-h.png');
}

header.sticky nav.main_menu > ul > li#nav-menu-item-7551:hover {
    background-image:url('../img/CONTACT-h.png');
}

header.sticky nav.main_menu > ul > li#nav-menu-item-7486:hover {
    background-image:url('../img/SUBMISSION-h.png');
}

header.sticky nav.main_menu > ul > li#nav-menu-item-7363:hover {
    background-image:url('../img/TV-h.png');
}

Twocode's solution should work though, but needs additional Photoshop work as you said in your comment. But I think it's the safest solution though.

CSS

/* Set the menu item background images */
header.sticky nav.main_menu > ul > li#OUTNOW {
    background-image:url('../img/OUTNOW.png');
}

header.sticky nav.main_menu > ul > li#ARTIST {
    background-image:url('../img/ARTIST.png');
}

header.sticky nav.main_menu > ul > li#ABOUTUS {
    background-image:url('../img/aboutus.png');
}

header.sticky nav.main_menu > ul > li:nth-child(4) {
    background-image:url('../img/CONTACT.png');
}

header.sticky nav.main_menu > ul > li:nth-child(5) {
    background-image:url('../img/SUBMISSION.png');
}

header.sticky nav.main_menu > ul > li:nth-child(6) {
    background-image:url('../img/TV.png');
}


/* Move up the background image on hover */
header.sticky nav.main_menu > ul > li:hover {
    background-position: 0 -80px;
}

Turnip · Answer 2 · 2014-07-26T10:38:09.593

You change the background-image on hover but then immediately set the background to none.

You need to remove this line from all of your hover states background:none ;

header.sticky nav.main_menu > ul > li:nth-child(1):hover {
    background-image:url('../img/OUTNOW-h.png');
    color:#fff ;
    background:none;
}

or perhaps set the background-color to something suitable:

   header.sticky nav.main_menu > ul > li:nth-child(1):hover {
        background-image:url('../img/OUTNOW-h.png');
        color:#fff ;
        background-color: transparent;
    }

To change the text colour you also need another hover block to target the nested a tag:

header.sticky nav.main_menu > ul > li:hover a {
    color: #FFF;
}

you don't need nth-child on this block

As others have mentioned, this is an awful way to do this. Instead you should be using a sprite sheet and changing background position

@Melvin If you don't want to use sprite images, you should consider preloading the `*-h.png` images using javascript. That way it wont be delay (blink) first time you hover the item (first time visiting the site, not having them cached either). — Niklas, Jul 26 '14 at 10:38
@3rror404 If he sets `color: #fff;` on the li element, he could just do `color: inherit;` on the a element. — Niklas, Jul 26 '14 at 10:41

score 1 · Answer 3 · answered Jul 26 '14 at 10:33

1

you just need to change on hover

 background-color: transparent;

remove the style which is

background:none;

answered Jul 26 '14 at 10:33

Shah Rukh

3,046
2
19
27

Trying to change navigation items background image with :hover on another pseudo class

3 Answers3