title: How to change an img src on a parent div hover?
body: <p>I'm having a problem with an image not changing on div hover using jQuery. Everything else changes accordingly except the image. Currently, the blue image stays the same and doesn't change. I also notice that the green image shows out of place when hovered which is weird. What am I doing wrong?</p>
  
  <p>I created a jsfiddle problem here: <a href="https://jsfiddle.net/8bcfnd6f/" rel="nofollow">https://jsfiddle.net/8bcfnd6f/</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="widget"&gt;
      &lt;div id="text-button-widget"&gt;
          &lt;h2&gt;Lorem Ipsum&lt;/h2&gt;
          &lt;img id="widget-img" src="http://www.clipartbest.com/cliparts/di8/KRL/di8KRL8ie.png"/&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#widget:hover {
      cursor: pointer;
      background-color: #0098db;
  }
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>$('#widget').hover(function(){ // hover in
      $('#widget h2, #widget p').css('color','#fff');
      $('#widget-img').css('background', 'url("http://www.clipartkid.com/images/17/youtube-play-icon-clipart-Ns7Pf4-clipart.gif") no-repeat center center fixed');
  }, function(){ // hover out
      $('#text-button-widget h2').css('color','#000');
      $('#text-button-widget p').css('color','#000');
      $('#widget-img').css('background', 'url("http://www.clipartbest.com/cliparts/di8/KRL/di8KRL8ie.png") no-repeat center center fixed');
  });
  </code></pre>