Hover style help needed

HTML & CSS
1

Hi designers!

I’m not a CSS expert, I can copy some templates and modify them to meet my needs… With a help of a template I created a CSS based menu with some gif images for the links (active and default) but I can’t ‘force’ the code to ‘do something’ when ‘hover’. Please have a look and PLEASE let me know what I am doing wrong…
THANK YOU ADVANCED!


ul#menu_buttons {
    height: 43px;
    list-style: none;
    margin: 0;
    padding: 0;
	margin-top:7px;
}
ul#menu_buttons li {
    background: url(../../graphics/gif/tabs.gif) #068b00;
    float: left;
    margin: 0 15px 0 0;
    padding-left: 10px;
}
ul#menu_buttons a {
    background: url(../../graphics/gif/tabs.gif) 100% 0;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:bold;
    color: #ffffff;
    display: block;
    float: left;
    height: 43px;
    line-height: 43px;
    padding-right: 10px;
    text-decoration: none;
}
ul#menu_buttons a.hover {
    background: url(../../graphics/gif/tabs.gif) 100% 0;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:bold;
    color: #ff0000;
    display: block;
    float: left;
    height: 43px;
    line-height: 43px;
    padding-right: 10px;
    text-decoration: none;
}
ul#menu_buttons li.active {
    background-color: #ffffff;
    background-position: 0 -43px;
}
ul#menu_buttons li.active a {
	background:url(../../graphics/gif/tabs.gif);
    background-position: 100% -43px;
    font-weight: bold;
	color:#999999;
}

P.S.: everything is working fine, BUT the hover…

2

a.hover should be a:hover :slight_smile:

What’s the difference?

a.hover in CSS equals <a class=“hover”> in HTML.

a:hover in CSS equals any <a…> in HTML, since :hover is a CSS pseudo-class, not a class.

3

Thank you noonnope!!! I never thought it would be that simple - and stupid mistake…

4

It happens to the best of us :lol:

You’re welcome :slight_smile: