title: How to change custom icon image on hover of the link next to it?
body: <p>How do I get a custom icon image to change on hover of the link next to it? Each image will be different for each link obviously. In my case I have two different coloured images one black and then I need it to change to green when you hover on the link next to it. Can this be done with just CSS or do I need to use JS?</p>
  
  <p><strong>Edit:</strong>
  Explained better. When the user hovers over "Link 1" the <code>.home-icon</code> should turn green and when "Link 2" is hovered <code>.tshirt-icon</code> should turn green etc</p>
  
  <p><a href="https://jsfiddle.net/ifusion/d3ntcxkn/" rel="nofollow"><strong>JS FIDDLE DEMO</strong></a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;i class="home-icon"&gt;&lt;/i&gt;Link 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;i class="tshirt-icon"&gt;&lt;/i&gt;Link 2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
  }
  
  .home-icon {
      background: url(http://s1.postimg.org/gk5fbl6vv/home_black.png) no-repeat;
      width: 32px;
      height: 32px;
      display: inline-block;
      margin-right: 20px;
  
      &amp;:hover {
          background: url(http://s2.postimg.org/43870q29h/home_green.png) no-repeat;
      }
  
  }
  
  .tshirt-icon {
      background: url(http://s30.postimg.org/61bqc12fh/tshirt_black.png) no-repeat;
      width: 32px;
      height: 32px;
      display: inline-block;
      margin-right: 20px;
  
      &amp;:hover {
          background: url(http://s17.postimg.org/3x9qzn8sb/tshirt_green.png) no-repeat;
      }
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/ifusion/d3ntcxkn/" rel="nofollow"><strong>JS FIDDLE DEMO</strong></a></p>