jQuery Hover Problem
<p>I am trying to get an element on my page to disappear and reappear when a user clicks on another element. My code looks like the following:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    $('.affordable').hover(function () {
        $('#reason-a').toggle();
    });
&lt;/script&gt;

&lt;span class="affordable"&gt;Affordable&lt;/span&gt;
&lt;span class="turnaround"&gt;Fast Turnaround&lt;/span&gt;
&lt;span class="communication"&gt;Communication&lt;/span&gt;

&lt;div id="reason-a"&gt;Affordable information&lt;/div&gt;
</code></pre>

<p>I want the user to be able to hover on the affordable class, and then the affordable information is shown. And then when the user hovers off the word, the information should disappear.</p>

<p>Many thanks</p>
