JSFiddle - React, Tailwind, and code Playground

by refan

HTML

<div id="mainnav">
  <div id="gdpbutton">
    <a href="gdp.html"><img id="gdpImg" src="https://jsfiddle.net/img/logo.png" /></a>
  </div>

  <div id="gdwbutton">
    <a href="gdw.html"><img id="gdwImg" src="https://jsfiddle.net/img/logo.png" /></a>
  </div>

  <div id="wdmbutton">
    <a href="wdm.html"><img id="wdmImg" src="https://jsfiddle.net/img/logo.png" /></a>
  </div>

  <div id="wddbutton">
    <a href="wdd.html"><img id="wddImg" src="https://jsfiddle.net/img/logo.png" /></a>
  </div>

  <div id="webdevbutton">
    <a href="webdev.html"><img id="webdevImg" src="https://jsfiddle.net/img/logo.png" /></a>
  </div>

  <div id="miscbutton">
    <a href="misc.html"><img id="miscImg" src="https://jsfiddle.net/img/logo.png" /></a>
  </div>
</div>

<hr/>

<img src="" alt="" id="image" />
<span id="msg"></span>

JavaScript

$(document).ready(function() {
  $("#mainnav a img").each(function(index, element) {
    // element == this

    $(element).hover(function() {
      var src = $(this).attr("src");
      $("#msg").text(src);
      $("#image").attr("src", src);
    });


    $(element).mouseout(function() {
      $("#image").attr("src", "");
    })

  });
});