JSFiddle - React, Tailwind, and code Playground

by vol7ron

HTML

<div id="banner1"><span><img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" title="Image" alt="Image"/></span></div>

<div id="banner2"><img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" title="Image" alt="Image"/></div>

CSS

html, body { border: 0; margin: 0; padding: 0; }
       div,span   { zoom          : 1;                }

       body       { text-align    : center;           }
       #banner1, #banner2  {
                    background    : #000              ;
                    border        : 3px double #ddd   ;
                    height        : 50px              ;
                    margin        : 0 auto            ;
                    overflow      : hidden            ;
                    text-align    : left              ;
                    width         : 250px             ;
                  }

JavaScript

$(document).ready(
         function ()
         {
            $('#banner1').hover( function(event){ $(this).children().hide("slow");}
                               , function(event){ $(this).children().show("slow");}
                               );
             
            $('#banner2').hover( function(event){ $(this).children().hide("slow");}
                               , function(event){ $(this).children().show("slow");}
                               );
         }
      );