JSFiddle - React, Tailwind, and code Playground

by nightcoregirl

HTML

<div id="container">
    <div id="Div1" class="elmt" image="url(http://www.blogcdn.com/fr.autoblog.com/media/2012/11/12c123239.jpg)">div1</div>
    <div id="Div2" class="elmt" image="url(http://www.ctvnews.ca/polopoly_fs/1.1096384!/httpImage/image.jpeg_gen/derivatives/landscape_960/image.jpeg)">div2</div>
    <div id="Div3" class="elmt" image="url(http://lokeshdhakar.com/projects/lightbox2/img/demopage/image-6.jpg)">div3</div>
    <div id="Div4" class="elmt" image="url(http://www.gettyimages.fr/CMS/StaticContent/1357941082241_new_banner-700x465.jpg)">div4</div>
</div>

CSS

#container{
    background-image:url('http://www.menucool.com/slider/jsImgSlider/images/image-slider-1.jpg');
    padding:5px;
    width:300px;
}

.elmt{
    background-color:white;
    width:100px;
    height:30px;
    margin:10px;
}
.baby1{background-color:yellow;}

JavaScript

$(function() {
    $('#container>div[image]').hover( function(){
      $(this).parent().css("background-image",$(this).attr("image"));     
   },
   function(){
      $(this).parent().css('background-image','url(http://www.menucool.com/slider/jsImgSlider/images/image-slider-1.jpg)');
   });
});