Блог

Я использую JavaScript для добавления прослушивателя событий, который заставит текст появляться внутри фотографии в моем HTML-документе при наведении курсора мыши. Мне удалось добавить событие, и когда я прокручиваю картинку, мой текст появляется внутри картинки.

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

Я пытался использовать innerHTML, appendChild и textContent для решения этой задачи. Все они успешно отображают мой текст внутри элемента, но у всех них одинаковая проблема с удалением от него окружающих элементов.

 <script>
document.getElementById("box1").addEventListener("mouseover", mouseOver);


function mouseOver() {
    var pictureContent = document.createElement("p");
    pictureContent.textContent = "China, officially the People's Republic of China, is a country in East Asia and the world's most populous country,";
    document.getElementById("box1").appendChild(pictureContent);
} 

</script>
  

Ваша проблема скорее связана с CSS, просто добавьте position: absolute стили позиционирования после создания элемента с помощью style.cssText .

 function mouseOver() {
    var pictureContent = document.createElement("p");
    pictureContent.textContent = "China, officially the People's Republic of China, is a country in East Asia and the world's most populous country,";
    pictureContent.style.cssText = "position:absolute"
    document.getElementById("box1").appendChild(pictureContent);
}