JSFiddle - React, Tailwind, and code Playground

by giddygeek

HTML

<script type="text/javascript" src="https://github.com/jquery/jquery-metadata/raw/master/jquery.metadata.js"></script>
<ul class="pics">
<li class="pic {url:'http://brainaudit.com/blog/wp-content/uploads/2008/08/chair.jpg'}">
    <a href="chair.php">CHAIR</a></li>
<li class="pic {url:'http://www.italianclassicsdirect.co.uk/imagesstatic/big/occasionaltables/Eames%20Table.gif'}">
    <a href="table.php">TABLE</a></li>
<li>
    <a href="sofa.php">SOFA</a></li>
<li>
    <a href="bookshelf.php">BOOKSHELF</a></li>
<ul>
    <div id="preview">
        <img src=""/>
        <div/>

JavaScript

$(document).ready(function()
    {
       $("ul.pics li").hover(
           function()
           {
              var data = $(this).metadata();
               if(data.url) {
                   $("#preview img").attr("src",data.url)
               }
               
           },
           function()
           {
               $("#preview img").attr("src","");
           }
           );
    }
);