title: Different hover effects [html/css]
body: <p>I have a menu with a hover effect on all listed links/ items. I want to put a Home icon (the house), whose hover effect to be switching between 2 identical images with different color, OK I got this, but the main hover effect still applies to it as background. </p>
  
  <p>For example, when I move the mouse over any of the links the hover effect is orange background around the text, and I want to remove that effect from the Home icon only( there's already switching between white house and orange house on mouse over).</p>
  
  <p>I've tried so many things and still nothing successful...</p>
  
  <p>Thank you in advance!</p>
  
  <p><a href="http://i.imgur.com/cTm8pVN.png" rel="nofollow">Picture of what I'm talking about</a></p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;div class="Menu"&gt;
  
  &lt;div class="ner"&gt;
  &lt;ul&gt;
  
          &lt;li class="home"&gt;
               &lt;a  href="#" &gt;&lt;img onmouseout="this.src='home1.png'" onmouseover="this.src='home2.png'" src="home1.png" width=25px; height=25px;&gt;&lt;/a&gt;&lt;/li&gt;
  
  
              &lt;li&gt;&lt;a href="#"&gt;Item1&lt;/a&gt;&lt;/li&gt;
              &lt;li class="drop"&gt;
                  &lt;a href="#"&gt;Item2&lt;/a&gt;
  
                  &lt;div class="dropdownContain"&gt;
                      &lt;div class="dropOut"&gt;
                          &lt;div class="triangle"&gt;&lt;/div&gt;
                          &lt;ul&gt;
                              &lt;li&gt;Blog 1&lt;/li&gt;
                              &lt;li&gt;Blog 2&lt;/li&gt;
                              &lt;li&gt;Blog 3&lt;/li&gt;
                              &lt;li&gt;Blog Blog 4&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item3&lt;/a&gt;&lt;/li&gt;
  
  
  &lt;li class="drop"&gt;
                  &lt;a href="#"&gt;Item4&lt;/a&gt;
  
                  &lt;div class="dropdownContain"&gt;
                      &lt;div class="dropOut"&gt;
                          &lt;div class="triangle"&gt;&lt;/div&gt;
                          &lt;ul&gt;
                              &lt;li&gt;Blog 1&lt;/li&gt;
                              &lt;li&gt;Blog 2&lt;/li&gt;
                              &lt;li&gt;Blog Blog 3&lt;/li&gt;
                              &lt;li&gt;Blog Blog 4&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Item5&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Item6&lt;/a&gt;&lt;/li&gt;
  
  
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS code:</p>
  
  <pre><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: all .3s linear 0s;
      -moz-transition: all .3s linear 0s;
      -ms-transition: all .3s linear 0s;
      -o-transition: all .3s linear 0s;
      transition: all .3s linear 0s;}
  
  .Menu ul li a:hover{ border-radius:6px;
  background: #ffa84c; /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to '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;}
  </code></pre>
  
  <p>The green background color is for testing purposes only.</p>