JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<script>
  $(document).ready(function() {
    $("#show1").on("mouseenter", function() {


      $("#hover2").hide();
      $("#load").hide();
      $("#hover1").show();

    });

    $("#show2").on("mouseenter", function() {
      $("#hover1").hide();
      $("#load").hide();
      $("#hover2").show();

    });

    $("#loaded").on("mouseenter", function() {
      $("#hover1").hide();
      $("#hover2").hide();
      $("#load").show();

    });

  });

</script>
<div>
  <img id="load" src="http://cdn.shopify.com/s/files/1/0240/4959/products/quinoa-cluster-snack-eatkeenwa-krunch-coconut-cranberry-cashew.jpg?v=1391021842" />
  <img id="hover1" src="http://cdn.shopify.com/s/files/1/0240/4959/products/quinoa-cluster-snack-eatkeenwa-krunch-cinnamon-banana-strawberry.jpg?v=1391021971" />
  <img id="hover2" src="http://cdn.shopify.com/s/files/1/0240/4959/products/quinoa-cluster-snack-eatkeenwa-krunch-vanilla-almond-raisin.jpg?v=1391022325" />
</div>

<div>
  <ul>
    <li id="loaded">Option 1</li>
    <li id="show1">Option 2</li>
    <li id="show2">Option 3</li>
  </ul>
</div>

CSS

<style> li {
  display: inline-block;
}

#hover1 {
  display: none;
}

#hover2 {
  display: none;
}

</style>