Cannot get jQuery mouseover to work with Span
<p>I have the following code:</p>

<pre><code>        $('.popUp').mouseover(function() {
            var divName = $(this).data("id");
            $('#' + divName).fadeIn();
        });

        $('.popUp').mouseout(function() {
            var className = $(this).data("id");
            $('#' + divName).fadeOut();
        });
</code></pre>

<p>It's supposed to show a pop-up near some text that gets hovered over.  The text to be shown is stored in hidden DIVs elsewhere on the page.  I pass the name of the DIV in via data-id="divname" in the SPAN tag.  Thing is, no matter what I do, jQuery won't react to the text.  Not on mouseover, hover, even click.  Nothing.  I tested it by placing an alert() in there just to see if would react, but it never does.</p>

<p>Here's an example of one of the SPANs:</p>

<pre><code>I am &lt;span class="popUp" data-id="s1"&gt;&lt;u&gt;employed&lt;/u&gt;, volunteering&lt;/span&gt;, or 
&lt;span class="popUp" data-id="s2"&gt;&lt;u&gt;associated&lt;/u&gt;&lt;/span&gt;
</code></pre>

<p>What am I doing wrong? :)</p>

<p>Thanks!</p>
