Add Current Element's Class To Another Element
<p>I'm trying to get my navigation links to change the css background of another element with jquery. </p>

<p><a href="http://www.flcbranson.org/flcindex-new.php" rel="nofollow">http://www.flcbranson.org/flcindex-new.php</a></p>

<p>Quite simply, mouseover li class="joinusonline" and header should become header class="joinusonline".
Mouseout and it goes back to header.</p>

<p>JJ</p>

<p>html code:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Faith Life Church - Branson, MO&lt;/title&gt;
    &lt;script src="include/jquery-1.6.4.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
    // changes &lt;header&gt; background when mouseover &lt;ul class="inheader"&gt;&lt;li&gt;
    $('.inheader li').hover(
        function(){$('header').addClass($(this).attr('class'))},
        function(){$('header').removeClass($(this).attr('class'))}
    )
    &lt;/script&gt;
&lt;/head&gt;
&lt;body role="document"&gt;
&lt;header role="banner"&gt;
    &lt;h1&gt;&lt;a href="http://www.flcbranson.org"&gt;Faith Life Church&lt;/a&gt;&lt;/h1&gt;
&lt;/header&gt;
&lt;nav role="navigation"&gt;
    &lt;h2&gt;Main site navigation&lt;/h2&gt;
    &lt;ul class="inheader"&gt;
        &lt;li class="joinusonline"&gt;&lt;a href="flconlineservices.php"&gt;Join Us On-Line&lt;/a&gt;&lt;/li&gt;
        &lt;li class="areainformation"&gt;&lt;a href="flcareainfo.php"&gt;Area Information&lt;/a&gt;&lt;/li&gt;
        &lt;li class="flcevents"&gt;&lt;a href="flcevents.php"&gt;&lt;abbr title="Faith Life Church"&gt;FLC&lt;/abbr&gt; Events&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/nav&gt;
&lt;section id="content" role="main"&gt;
    &lt;h1 id="title"&gt;Welcome&lt;/h1&gt;
&lt;/section&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>css code:</p>

<pre><code>header {background:#003366 url() no-repeat center top;}
header.joinusonline {background-image:url(../images/backgrounds/header-joinusonline.jpg)}
header.areainformation {background-image:url(../images/backgrounds/header-areainformation.jpg)}
header.flcevents {background-image:url(../images/backgrounds/header-flcevents.jpg)}
</code></pre>
