Need help editing some javaScript/jQuery - Hover intent

Question

I am trying to edit this code for my website. Right now, on hover it activates an overlay on the image. I want to add to it so that in addition to activating the overlay it also changes the background color of the body. Can this be done within this code or is this more work than I think? Thanks!

jQuery('.images').hoverIntent(function() {
    jQuery(this).find('.title-wrap').stop().each(function() {
      jQuery(this).animate({
        width: jQuery(this).data('wrapping')
      }, 150);
    });

Answer 1

One way to configure hoverIntent is with 2 functions as arguments .... one for each of mouseenter and mouseleave.

For the body just toggle a class and set the background in a css rule

function hoverIn(){
   $('body').addClass('different-background-class');
   jQuery(this).find('.title-wrap').stop().each(function() {
      jQuery(this).animate({
        width: jQuery(this).data('wrapping')
      }, 150);

}

function hoverOut(){
   $('body').removeClass('different-background-class');
   jQuery(this).find('.title-wrap').stop().width('auto');

}
// pass the 2 function references as arguments
jQuery('.images').hoverIntent(hoverIn,hoverOut);

I'm not sure if you have width defined prior to this animation. If so we can store the initial value within hoverIn() function in order to reset it in hoverOut(). I used auto assuming it wasn't set in normal state