Почему не работает код?

Question

[JackShcherbakov]

Код должен подсвечивать всю цепочку родителей элемента, на который был наведен указатель мыши. Но почему-то код не работает. Ссылка на код - https://codepen.io/CitizenOne/pen/OzaLdx
В чем дело? Как исправить?

Comments

[kulaeff]

Так вы не повесили обработчик события onmouseenter. У вас там зачем onmouseout. Плюс вешать надо не на #output, а на его потомков.

[JackShcherbakov]

kulaeff, onmouseenter - невсплывающее событие. А для того чтобы сделать делегирование без костылей, нужен, я так думаю, именно onmouseout.

[kulaeff]

JackShcherbakov, точно, используйте onmouseover. И, как уже сказали, параграфы нельзя вкладывать друг в друга. Каждый открытый тег p автоматом закрывает предыдущий открытый тег p.

Answer 1

[Stalker_RED]

p - это paragraph. Они не могут быть вложенными.

Как-то так: https://jsfiddle.net/t9kk78dv/

Comments

[EEclipsEE]

обычный блочный элемент. Можно всю страницу сверстать заменив все дивы на параграфы. С точки зрения валидности возможно не правильно, но работать скрипт должен.

[JackShcherbakov]

Вот, пожалуйста, заменил на div - https://codepen.io/CitizenOne/pen/OzaLdx

[EEclipsEE]

JackShcherbakov, Мне не совсем понятно почему у вас событие mouseout. Должно быть или mouseover или mouseenter.

Типо так.

[Stalker_RED]

EEclipsEE,

обычный блочный элемент.

А вот это вы как объясните?
https://jsfiddle.net/epgykgqv/

Рекомендую присмотреться к разделу tag omission: https://developer.mozilla.org/ru/docs/Web/HTML/Ele...