Show the icon on the specific division when switching to the menu

advertisements

Visit the Icomooon.io and check the function of display icon when we hover on menu ul and an icon appears on another div. Kindly send me the fiddle with their "hover to display an icon on another side" function.


Here is an small example:

$('ul li').hover(function() {
  // mouse enter
  var logo = $(this).attr("data-icon"); // get logo from data-icon parameter
  $('.icon img').attr("src", logo); // change logo
}, function() {
  // mouse left
  $('.icon img').attr("src", "http://placehold.it/50x50"); // remove logo
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="icon">
  <img src="http://placehold.it/50x50">
</div>
<ul>
  <li data-icon="http://lorempixel.com/50/50/"><a href="#">Item 1</a>
  </li>
  <li data-icon="http://lorempixel.com/50/50/"><a href="#">Item 2</a>
  </li>
</ul>

This jQuery snippet changes the icon of the img element of the div with the icon class. It get's the logo from the data-icon parameter of the single li elements. If you enter the li element with the mouse (hover), it will change the icon. If you leave the mouse, it will go back.

Please notice: In this example are just placeholder images. You can use fixed images for that to get it working as expected.