title: jquery getting this child to change img src
body: <p>There's an old method I've used a lot to append a "-rollover" to an img to save me a lot of css rules but I've come across an instance where I can't get it to work.</p>
  
  <p>Usually I just give the img a class of rollover and then use this jQuery:</p>
  
  <pre><code>$(".rollover").hover(function() {
      $(this).attr("src", $(this).attr("src").split(".").join("-rollover."));
  }, function() {
      $(this).attr("src", $(this).attr("src").split("-rollover.").join("."));
  });
  </code></pre>
  
  <p>However in this case the img is sitting in an element and I want the hover of the element to change the img src.</p>
  
  <p>Here's a sample of the HTML:</p>
  
  <pre><code>&lt;li class="rollover-child grid-item-2"&gt;
      &lt;a href="#"&gt;
          &lt;img src="img/copy/file.jpg" width="231" height="130" /&gt;
          &lt;span class="gl-grid-text"&gt;
              &lt;span class="gl-grid-title"&gt;Book!&lt;/span&gt;
              &lt;span class="gl-grid-sub-text"&gt;View upcoming events&lt;/span&gt;
              &lt;span class="gl-grid-arrow"&gt;&amp;gt;&lt;/span&gt;
          &lt;/span&gt;
      &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>There are also some list items which don't have an anchor but still need the rollover effect, eg</p>
  
  <pre><code>&lt;li class="rollover-child&gt;
      &lt;img src="img/copy/file.jpg" width="231" height="130" /&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>The jQuery I was trying was this:</p>
  
  <pre><code>$(".rollover-child").hover(function() {
      $('img', this).attr("src", $(this).attr("src").split(".").join("-rollover."));
  }, function() {
      $('img', this).attr("src", $(this).attr("src").split("-rollover.").join("."));
  });
  </code></pre>
  
  <p>but I can't get it to work at all. I've tried variations with find and children and siblings but I must be doing something wrong.</p>
  
  <p>Any help hugely appreciated.</p>
  
  <p>Cheers,
  Alex</p>