jQuery hierarchy issue with next()
<p>Seems like <code>$("img").next().hide();</code> is not working when both the image and div tag are a child of a paragraph.</p>

<pre><code>&lt;p&gt;
&lt;img src="image.jpg" /&gt;
&lt;div&gt;text&lt;/div&gt; // this div is set to 'display: none' by default in css
&lt;/p&gt;
</code></pre>

<p>Yet, if I substitute <code>&lt;div&gt;</code> with <code>&lt;span&gt;</code></p>

<pre><code>&lt;p&gt;
&lt;img src="image.jpg" /&gt;
&lt;span&gt;text&lt;/span&gt;
&lt;/p&gt;
</code></pre>

<p>or if I omit the <code>&lt;p&gt;</code> tags</p>

<pre><code>&lt;img src="image.jpg" /&gt;
&lt;div&gt;text&lt;/div&gt;
</code></pre>

<p>the jQuery selector does work properly. Any ideas why this is the case? Is it related to inline and block display? How can I make it work as described in the top code example?</p>

<p>This is the jQuery code I am using:</p>

<pre><code>$(document).ready(function(){
    $("img").hover(
     function()
     {
      $(this).next().show();
     },
     function()
     {
      $(this).next().hide();
     }
    );
});
</code></pre>

<p>Thanks for your help!</p>
