Good evening,

 

I am trying to assign different hover classes to parts of my menu.

 

I have set the html as:-

 

<div id="options" class="clearfix">
					<div class="slctbox1">
						<div id="ad_search1" class="drpdwn"><a href="#">Filter</a></div><br class="clear" />
						<div class="moredlts_adv1">
							<ul id="filters" class="option-set clearfix" data-option-key="filter">
								<li class="first""><a href="#filter" data-option-value="*" title="All Works" class="selected filter-pink">All Works</a></li>
								<li ><a href="#filter" data-option-value=".web-design" title="Web Design" class="filter-green">Web Design</a></li>
								<li><a href="#filter" data-option-value=".logo-design" title="Logo Design" class="filter-blue">Logo Design</a></li>
							</ul>
						</div>
					</div>

CSS as:-

 

#options li a{color: #202020; display: block; font-family: Tahoma,Arial,sans-serif; font-size: 15px; font-weight: normal; padding:3px 7px;}
#options li a:hover{background-color:#8cc63f; color: #000;  text-decoration: none;}
#options li a.selected{background-color:#252525; color: #fff; padding:3px 7px;}
#options li .filter-pink a:hover{background:#ed1e79;}
#options li .filter-green a:hover{background:#8cc63f;}
#options li .filter-blue a:hover{background:#00a99d;}
#options #toggle-sizes a{background:#DDD; float: left; height: 23px; margin-right: 20px; margin-top: 3px; padding: 0 !important; text-indent: -9999px; width: 35px;}

It doesn't seem to be working and only shows the green #8cc63f on hover. Can someone help me see what I am doing wrong.

 

Thanks in advance :-)

Change

#options li .filter-pink a:hover{background:#ed1e79;}

#options li .filter-green a:hover{background:#8cc63f;}

#options li .filter-blue a:hover{background:#00a99d;}

To

#options li a.filter-pink:hover{background:#ed1e79;}

#options li a.filter-green:hover{background:#8cc63f;}

#options li a.filter-blue:hover{background:#00a99d;}