Image Hover Changes Background

Image Hover Changes Background

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="wrapper">

<div>
<img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-268806.jpg" id="preview1" /> </div>
    
    <div>
    
    <img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-268806.jpg" id="preview2" /></div>
    
    <div>
    
    <img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-268806.jpg" id="preview3" /></div>
    
</div><!-- wrapper end -->

CSS

body{
    padding: 0;
    margin: 0;
    background-color: #111;
    background-size: cover;
}
.bodyBgChange1{
    background-image: url('https://source.unsplash.com/random');
}
.bodyBgChange2{
    background-image: url('http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-268806.jpg');
}

.bodyBgChange3{
    background-image: url('https://source.unsplash.com/random');
}
#wrapper{
    width: 500px;
    margin: 50px auto;
    text-align: center;
}
#preview1{
    width: 200px;
    display: inline-block;
     float:left !important;
}

#preview2{
    width: 200px;
    display: inline-block;
    float:left !important;
  
}

#preview3{
    width: 200px;
   
    float:left !important;

  
}

JavaScript

$(document).ready(function(){
    $("#preview1").hover(function(){
        $("body").toggleClass("bodyBgChange1");
    });
    $("#preview2").hover(function(){
        $("body").toggleClass("bodyBgChange2");
    });
    
     $("#preview3").hover(function(){
        $("body").toggleClass("bodyBgChange3");
    });
});