JavaScript Bild flackert bei onmouseover und onmouseout

Question

Ich versuche, einen Mouseover zu tun, um ein größeres Bild des Standardbildes zu popup. Wenn ich jedoch über das kleinere Bild schwebe, erscheint ein Popup-Fenster, aber wenn ich über das Popup-Bild schwebe, flackert es weiter.

Unten ist mein Code:

HTML:

<div class="thumbnail" id="thumbnail1"> 
    <img src="image1.jpg" onmouseover="enlarge1()" onmouseout="minimize1()"/>    
</div> 

JS:

function enlarge1() { 
    var parent = document.getElementById("thumbnail1"); 
    var child = document.createElement("IMG"); 
    child.setAttribute("src", "image-large1.jpg"); 
    child.setAttribute("width", "350%"); 
    child.setAttribute("alt", "Related Large 1"); 
    child.style.position="absolute"; 
    child.style.zIndex="1"; 
    child.style.bottom="15%"; 
    child.style.left="30%"; 

    parent.appendChild(child); 

} 

function minimize1() { 
    var parent = document.getElementById("thumbnail1"); 
    var child = parent.lastElementChild; 
    parent.removeChild(child); 
} 

Answer 1

Sie brauchen ...

1. Bewegen Sie die Maus-Ereignisse auf die Verpackung div

2. ändern sie onmouseenter und onmouseleave

<div class="thumbnail" id="thumbnail1" onmouseenter="enlarge1()" onmouseleave="minimize1()"> 
    <img src="image1.jpg" alt=''> 
</div> 

---

diese Weise, wenn Sie über entweder Bild schweben, es ist immer noch in "schweben" -Modus — und im Gegensatz zu onmouseover, onmousenter nur einmal ausgelöst (wenn Sie die div eingeben), so Es wird nicht neu ausgelöst, wenn Sie vom Schweben über das kleine zum großen Bild wechseln.

Answer 2

können Sie verwenden MouseEnter- und mouseleave, nicht und mouseout Mouseover.

Da das MouseOver-Ereignis aufgerufen wird, sobald Sie die Maus über das DOM oder das untergeordnete DOM bewegen. Es kann also oft aufgerufen werden, wenn Sie die Maus über das größere Bild bewegen.

Aber für mouseenter, nur wenn Sie das DOM eingeben, wird es aufgerufen, nicht für sein Kind. Es wird nicht aufgerufen, wenn Sie die Maus über das größere Bild bewegen.

var x = 0; 
 
var z = 0; 
 
function myEnterFunction() { 
 
    document.getElementById("demo2").innerHTML = x+=1; 
 
} 
 
function myMoveFunction() { 
 
    document.getElementById("demo").innerHTML = z+=1; 
 
}

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    margin: 10px; 
 
    float: left; 
 
    padding: 30px; 
 
    text-align: center; 
 
    background-color: lightgray; 
 
} 
 

 
p { 
 
    background-color: white; 
 
}

<div onmouseenter="myEnterFunction()"> 
 
<img style="width: 100px;height: 100px;background-color:red;" src="" title="move mouse enter here" /> 
 
<p>onmouseenter: <br> <span id="demo2">Mouse over me!</span></p> 
 
</div> 
 
<div onmousemove="myMoveFunction()"> 
 
    <p>onmousemove: <br> <span id="demo">Mouse over me!</span></p> 
 
</div>