I need some help with an image rollover script.

Iam using the following to trigger the rollover of thumbnails and that is fine for most instances in the site however I need something similar to this but expanded so that the script is functional in the sense that when the parent li or div element is rolled over the child image changes to the rollover state.

I am using css to change the color of the text when the parent element is in its hover state but it would be good if the script could handle this to for a more complete solution.

HTML:

<li><a href="/Link.html"><img src="/Video/WAP/Thumbs/WAP-04-01.jpg" id=""/><h1>Link-Text</h1></a></li>

Js:

$(".Video-Listings li a img").hover(function() {

$(this).attr("src", $(this).attr("src").split(".jpg").join("-Over.jpg"));

  }, function() {

//$(this).attr("src", $(this).attr("src").split("-Over.jpg").join(".jpg"));

  });