A:Hover background image not showing

SRD75 · 02-05-2013, 04:24 AM

This site has a navigation menu who's elements I want to have a background image display on hover, or when the page is active.

On line 1428 of style.css, I have:

Code:

.main-navigation li a:hover, .main-navigation li a:current, .main-navigation li a:active {
   background: url(images/menu_hover.jpg) repeat-x top;
}

This doesn't work.

It does work if I apply the background image to a:link, so the image URL is correct.

Why isn't it working for a:hover, a:current, a:active?

aaronhockey_09 · 02-05-2013, 04:26 AM

Can you post a link for us to see ?
Can't really help with only that,
Although your use of a:current is not correct. It should be a.current, or a:active

If you could post a URL that would help alot.

SORRY
didnt see the link
Looking at it now

aaronhockey_09 · 02-05-2013, 04:36 AM

I believe it is because of the .main-navigation li a:current,

Because when i add the same background code, into where you have defined the colour

Code:

.main-navigation li a:hover {

It works just fine.
Try this.

Code:

.main-navigation li a:hover, .main-navigation li.current-menu-item:hover a {
		background: url(images/menu_hover.jpg) repeat-x top;
	}

That should do the trick
What we are doing is calling class for the current LI for the current tabs, and keeping the hover the same

Hope this helps.

SRD75 · 02-06-2013, 06:59 AM

Thanks Aaron!