Как наложить несколько прозрачных png-изображений, чтобы они показывались по отдельности при наведении курсора?

Для наложения нескольких прозрачных png-изображений в JavaScript, так чтобы они показывались по отдельности при наведении курсора, можно воспользоваться стилями CSS и обработчиками событий мыши.

Сначала, необходимо создать элементы в HTML, каждый из которых будет содержать в себе одно изображение. Элементы могут быть, например, div-контейнерами с фоновым изображением из нужного png-файла:

<div id="container">
  <div class="image" style="background-image: url(image1.png);"></div>
  <div class="image" style="background-image: url(image2.png);"></div>
  <div class="image" style="background-image: url(image3.png);"></div>
</div>

Следующим шагом является определение стилей CSS для контейнера и для каждого изображения:

#container {
  position: relative;
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* скрываем изображения по умолчанию */
  transition: opacity 0.3s ease; /* добавляем плавный эффект при переходе прозрачности */
}

.image:hover {
  opacity: 1; /* отображаем изображение при наведении курсора */
}

В данном примере используется абсолютное позиционирование, чтобы каждое изображение занимало всю доступную область контейнера. Свойство opacity устанавливает прозрачность изображений, а с помощью transition добавляется плавный эффект при переходе прозрачности. Класс .image:hover определяет стили для изображений при наведении курсора.

В JavaScript необходимо добавить обработчик события, который будет реагировать на наведение курсора на контейнер:

var container = document.getElementById('container');
container.addEventListener('mouseover', function() {
  // код, который будет выполнен при наведении курсора
});

Внутри обработчика можно добавить код для отображения загружаемого изображения в зависимости от положения курсора или другие дополнительные эффекты. Например, можно использовать DOM-методы для добавления и удаления класса, который изменяет стиль отображения изображения.

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