title: How to create mouseover and mouseleave effect within input and label elements
body: <p>Here my aim is to replace the images wrapped up in labels with the list of images using the mouseover and mouseleave effect. I currently use the Jquery click functionality to show and hide the list of images.</p>
  
  <p><strong>Example:</strong></p>
  
  <p>If the mouse is over <code>img1</code> then <code>img2</code> appears and once the mouse leaves <code>img1</code> then <code>img2</code> disappears however once <code>img1</code> is clicked <code>img2</code> stays where it is. I would like the same functionality for the others so assuming we can now see <code>img2</code> I would like to see <code>img4</code> appear and <code>img2</code> dissappear if the mouse enters <code>img3</code> and then back <code>img2</code> if the mouse leaves.</p>
  
  <p>Basically the same functionality as the answer to <a href="https://stackoverflow.com/questions/35395745/how-to-add-radio-buttons-to-rollover-functionality">this</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
  
  &lt;input type="radio" value="1.0" id="b"/&gt;
  &lt;label for="b"&gt;&lt;img id="img1"  src="http://lorempixel.com/10/10"&gt;&lt;/label&gt;
  
  &lt;input type="radio" value="2.0" id="c"&gt;
  &lt;label for="c" &gt;&lt;img id="img3"  src="http://lorempixel.com/10/10"&gt;&lt;/label&gt;
  
  &lt;input type="radio" value="3.0" id="d"/&gt;
  &lt;label for="d" &gt;&lt;img id="img5" src="http://lorempixel.com/10/10"&gt;&lt;/label&gt;
  
  &lt;/div&gt;
  
   &lt;ul&gt;
   &lt;li&gt;
         &lt;img id="img2" src="http://lorempixel.com/10/10" style="position:absolute"&gt;
         &lt;img id="img4" src="http://lorempixel.com/10/10" style="position:absolute"&gt;
         &lt;img id="img6" src="http://lorempixel.com/10/10" style="position:absolute"&gt;
     &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>input[type="radio"] {
  display: none;
  }
  
  #img1, #img3, #img5 {
  width: 100px;
  height:100px;
  }
  
  #img2{
  bottom: 25px;
  }
  #img4 {
  bottom: 50px;
  }
  #img6 {
  bottom: 75px;
  }
  </code></pre>
  
  <p>JQUERY:</p>
  
  <pre><code>   $("img[id='img2']").css({"display": "none"});
     $("img[id='img4']").css({"display": "none"});
     $("img[id='img6']").css({"display": "none"});
  
      $("#img1").click(function(){
          $("img[id='img2']").show();
          $("img[id='img4']").hide();
          $("img[id='img6']").hide();
      });
  
      $("img[id='img3']").click(function(){
          $("img[id='img4']").show();
          $("img[id='img2']").hide();
          $("img[id='img6']").hide();
      });
  
       $("img[id='img5']").click(function(){
          $("img[id='img6']").show();
          $("img[id='img2']").hide();
          $("img[id='img4']").hide();
      });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/tqb0oyy4/" rel="nofollow noreferrer">fiddle</a></p>