Проблема иерархии jQuery с next ()

Question

Похоже, $("img").next().hide(); не работает, когда и изображение, и тег div являются дочерними для абзаца.

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

Тем не менее, если я заменю <div> на <span>

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

или если я опущу теги <p>

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

Селектор jQuery работает правильно. Есть идеи, почему это так? Это связано с линейным и блочным отображением? Как я могу заставить его работать, как описано в верхнем примере кода?

Это код jQuery, который я использую:

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

Спасибо за вашу помощь!

Answer 1

Вы не должны использовать блочный элемент (DIV) внутри встроенных элементов (P). Вместо P используйте DIV с набором классов, подобным P.

Answer 2

Элемент p допускает только элементы встроенного уровня в качестве дочерних элементов. Это может быть причиной того, почему ваш первый пример не работает.