Question

Seems like $('img').next().hide(); is not working when both the image and div tag are a child of a paragraph.

<p> <img src='image.jpg' /> <div>text</div> // this div is set to 'display: none' by default in css </p> 

Yet, if I substitute <div> with <span>

<p> <img src='image.jpg' /> <span>text</span> </p> 

or if I omit the <p> tags

<img src='image.jpg' /> <div>text</div> 

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?

This is the jQuery code I am using:

$(document).ready(function(){     $('img').hover(         function()         {             $(this).next().show();         },         function()         {             $(this).next().hide();         }     ); }); 

Thanks for your help!

Answer 1

The p element does only allow inline-level elements as child elements. This may be the reason for why your first example does not work.