当鼠标悬停在鼠标上方时如何停止mouseOver文本闪烁

Question

I wrote a Javascript function to display text when you hover over the div . I did this but listening to the mouseover event. The text does appear when my mouse hovers over the div , but when the mouse hovers over the newly-appeared text within that div the text flickers.

How can I stop this text from flickering? Everything else is working okay.

document.getElementById("box1").addEventListener("mouseover", mouseOver);
document.getElementById("box1").addEventListener("mouseout", mouseOut);

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

function mouseOut() {
  document.getElementById("box1").textContent = "China";
}

I would like the text not to flicker, even when the mouse is hovering over it.

Answer 1

Include the paragraph in the HTML, and simply hide/show it by modifying its display attribute in CSS.

Also, as Josh Lin mentioned, use mouseenter & mouseleave instead of mouseover & mouseout , so that transitions inside the div (from div to p ) are not counted.

Working demo:

 document.getElementById("box1").addEventListener("mouseenter", mouseEnter); document.getElementById("box1").addEventListener("mouseleave", mouseLeave); function mouseEnter() { document.getElementById("box_para").style.display = "block"; } function mouseLeave() { document.getElementById("box_para").style.display = "none"; } 

 #box1 { background:blue; width: 200px; height: 200px; } #box_para { display: none; } 

 <div id="box1"> China <p id="box_para">Officially the People's<br> Republic of China, is a <br>country in East Asia and <br>the world's most <br>populous country,<p> </div> 

Answer 2

Based on the same idea as glhr's answer, but pure css with no java script

 #box1 { background:red; width: 300px; height: 180px; color:yellow; padding: 6px } #box_para { color:black; display: none; } #box1:hover > #box_para { margin-left:10px; display:block !important; } 

 <div id="box1"> <h1>🇨🇳 China </h1> <p id="box_para">Officially the People's<br> Republic of China, is a <br>country in East Asia and <br>the world's most <br>populous country,<p> </div>