Different hover effects [html/css] -

i have menu hover effect on listed links/ items. want put home icon (the house), hover effect switching between 2 identical images different color, ok got this, main hover effect still applies background.

for example, when move mouse on of links hover effect orange background around text, , want remove effect home icon only( there's switching between white house , orange house on mouse over).

i've tried many things , still nothing successful...

thank in advance!

picture of i'm talking about

html code:

<div class="menu">  <div class="ner"> <ul>          <li class="home">              <a  href="#" ><img onmouseout="this.src='home1.png'" onmouseover="this.src='home2.png'" src="home1.png" width=25px; height=25px;></a></li>               <li><a href="#">item1</a></li>             <li class="drop">                 <a href="#">item2</a>                  <div class="dropdowncontain">                     <div class="dropout">                         <div class="triangle"></div>                         <ul>                             <li>blog 1</li>                             <li>blog 2</li>                             <li>blog 3</li>                             <li>blog blog 4</li>                         </ul>                     </div>                 </div>              </li>             <li><a href="#">item3</a></li>   <li class="drop">                 <a href="#">item4</a>                  <div class="dropdowncontain">                     <div class="dropout">                         <div class="triangle"></div>                         <ul>                             <li>blog 1</li>                             <li>blog 2</li>                             <li>blog blog 3</li>                             <li>blog blog 4</li>                         </ul>                     </div>                 </div>              </li> <li><a href="#">item5</a></li> <li><a href="#">item6</a></li>   </ul> </div> </div> 

css code:

.menu {     background: #44474b;     display: block;     position: fixed;     width:900px;     right: 0;     top: 0;     height: 55px;     min-width: 100%;     z-index: 9999; }  .menu ul{ float:left;}  .menu li{position:relative; z-index:10; float:left; list-style:none; margin:0 15px; }  .menu a{ padding:11px 18px; color:#373737; list-style:none; color:#fff; text-decoration:none;          -webkit-transition: .3s linear 0s;     -moz-transition: .3s linear 0s;     -ms-transition: .3s linear 0s;     -o-transition: .3s linear 0s;     transition: .3s linear 0s;}  .menu ul li a:hover{ border-radius:6px; background: #ffa84c; /* old browsers */ /* ie9 svg, needs conditional override of 'filter' 'none' */ background: -moz-linear-gradient(top,  #ffa84c 0%, #ff7b0d 100%); /* ff3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa84c), color-stop(100%,#ff7b0d)); /* chrome,safari4+ */ background: -webkit-linear-gradient(top,  #ffa84c 0%,#ff7b0d 100%); /* chrome10+,safari5.1+ */ background: -o-linear-gradient(top,  #ffa84c 0%,#ff7b0d 100%); /* opera 11.10+ */ background: -ms-linear-gradient(top,  #ffa84c 0%,#ff7b0d 100%); /* ie10+ */ background: linear-gradient(to bottom,  #ffa84c 0%,#ff7b0d 100%); /* w3c */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#ffa84c', endcolorstr='#ff7b0d',gradienttype=0 ); /* ie6-8 */  }  .menu .home a:hover { background-color: green; !important text-decoration:none; !important }  .ner{width:900px; margin:0 auto; padding-top:0; padding-left:0;} 

the green background color testing purposes only.

you can add class anchor tag of home icon , implement different css changes class this:

html:

<li>     <a class="home" href="#" ><img onmouseout="this.src='home1.png'" onmouseover="this.src='home2.png'" src="home1.png" width="25" height="25">     </a> </li> 

css:

a:hover.home {   background-color: green; !important   text-decoration:none; !important } 

here's jsfiddle example above codes: http://jsfiddle.net/andrewl32/g2vql0ms

and width=25px; height=25px; should width="25" height="25"