Change Site Background Image on Menu Hover

Change Site Background Image on Menu Hover

I have been sorting through as many posts as I can but I am not finding a
solution. CSS isn't likely because of the nesting needs as you can only
affect child classes/ids.
Here is what I need... I need to have my main navigation in place. Each
nav button will have its own class. When you hover over a menu item, the
main site background (body bg) will need to change.
I believe this can be done with JQuery but I don't know enough to even get
started.
Example:
Menu Item 1 (class - .menu-item-1)
on Hover of .menu-item-1
change body background from #fff to
body{background-image: url('yadayadayada.jpg');}
And then...when the hover affect is over...go back to white.