title: Change Site Background Image on Menu Hover
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>I believe this can be done with JQuery but I don't know enough to even get started.</p>
  
  <p>Example:</p>
  
  <pre><code>Menu Item 1 (class - .menu-item-1)
  </code></pre>
  
  <p>on <code>Hover</code> of <code>.menu-item-1</code></p>
  
  <p>change body background from <code>#fff</code> to </p>
  
  <pre><code>body{background-image: url('yadayadayada.jpg');}
  </code></pre>
  
  <p>And then...when the hover affect is over...go back to white.</p>