Почему код работает не полностью?

Question

[mr jeery]

https://codepen.io/Jeerjmin/pen/MrKgRW
Почему первые два изображения не анимируются при наведении.
Различия в HTML коде между первые двумя блоками и всеми остальными в том, что они записаны в несколько строк.
Как записать код в несколько строк, но притом чтобы работал?

Answer 1

[Dmitriy Uvarov]

Разница в состоит в том, что перенос строки является символом, а это значит что в дочерних узлах появится текст, а значит что ссылки

var overlay = this.childNodes[1];
var image = this.childNodes[0];

будут неверными, а следовательно ваша анимация работать не будет. В таком случае просто ищите элемент внутри элемента, вместо поиска узла. Попробуйте отладить код прежде, чем писать свой вопрос, отладка наша все