Changing image on hover with css

Question

enter image description here

I dont know much about css but what can i do to change the bullet image on the submenus?

#leftCntr .menuBox ul li a { padding: 0px 0px 0px 54px; color: #7d9696; text-decoration: none; background: url(../images/menuDisc.gif) 10px 4px no-repeat; }
        #leftCntr .menuBox ul li a.active { color: #949494; background: url(../images/menuDiscHover.gif) 10px 4px no-repeat; }
        #leftCntr .menuBox ul li a:hover { color: #000000; background: url(../images/menuDiscHover.gif) 10px 4px no-repeat; }

I don't know much about your HTML, but you could try setting them to a different URL. — user1726343
– user1726343, Commented Dec 18, 2012 at 12:46

Gerrit Bertier · Accepted Answer · 2012-12-18 12:48:10Z

1

Hard to tell without seeing your HTML code, but I'm guessing something like this should do:

#leftCntr .menuBox ul li a {
    padding: 0px 0px 0px 54px;
    color: #7d9696;
    text-decoration: none;
    background: url(../images/menuDisc.gif) 10px 4px no-repeat;
}

#leftCntr .menuBox ul li a.active {
    color: #949494;
    background: url(../images/menuDiscHover.gif) 10px 4px no-repeat;
}

#leftCntr .menuBox ul li a:hover {
    color: #000000;
    background: url(../images/menuDiscHover.gif) 10px 4px no-repeat;
}

#leftCntr .menuBox ul li li a {
    background: url(../images/submenuDisc.gif) 10px 4px no-repeat; /* Set the image here */
}

answered Dec 18, 2012 at 12:48

Gerrit Bertier

4,2412 gold badges24 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Damien Overeem · Accepted Answer · 2012-12-18 12:47:04Z

0

Add the following to your css. It will remove the background from li's that are within another list.

You can of course also just set a different background if you want a different image to show.

#leftCntr .menuBox ul li ul li a:active {
    background: none;
}

#leftCntr .menuBox ul li ul li a:hover {
    background: none;
}

(Edited to match the A element.)

answered Dec 18, 2012 at 12:47

Damien Overeem

4,5294 gold badges38 silver badges56 bronze badges

Comments

Moutasem Shahin · Accepted Answer · 2012-12-18 12:48:42Z

0

Change your code to

#leftCntr .menuBox ul li a { padding: 0px 0px 0px 54px; color: #7d9696; text-decoration: none; background: url(../images/menuDisc.gif) 10px 4px no-repeat; }
        #leftCntr .menuBox ul li a.active { color: #949494; background: url(../images/menuDiscHover.gif) 10px 4px no-repeat; }
        #leftCntr .menuBox ul li a:hover { color: #000000; background: url(../images/menuDiscHover.gif) 10px 4px no-repeat; }

/* New Added */

 #leftCntr .menuBox ul li li a.active { color: #949494; background: url(../images/menuDiscHover.gif) 10px 4px no-repeat; }
            #leftCntr .menuBox ul li li a:hover { color: #000000; background: url(../images/menuDiscHover.gif) 10px 4px no-repeat; }

answered Dec 18, 2012 at 12:48

Moutasem Shahin

2421 silver badge5 bronze badges

Collectives™ on Stack Overflow

Changing image on hover with css

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related