Javascript Link auf Bild hinzufügen Hover> Link aktiv auf Link halten Hover

Question

Ich versuche einen Link auf ein Bild hinzuzufügen, wenn ich das Bild schwebe. Derzeit mein Javascript ist wie folgt:

// check elements mouse is hover 
document.addEventListener("mouseover", addCropLink, true); 
document.addEventListener("mouseout", removeCropLink, true); 
// add link if element is image 
function addCropLink(){ 
    var target = event.target; 
    if (target instanceof HTMLImageElement){ 
     var cropLink = document.createElement("a"); 
     cropLink.setAttribute("class", "resizeMyPhoto"); 
     cropLink.setAttribute("id", "resizeMyPhoto"); 
     cropLink.setAttribute("target", "_blank"); 
     cropLink.innerHTML += "Crop/Resize"; 
     cropLink.href = chrome.extension.getURL("index.html#"); 
     cropLink.href = cropLink.href + target.src; 
     target.parentNode.style.position = "relative"; 
     target.parentNode.style.display = "inline-block"; 
     target.parentNode.insertBefore(cropLink, target.nextSibling); 
    } 
} 

// remove link if element is image 
function removeCropLink(){ 
    var target = event.target; 
    if (target instanceof HTMLImageElement){ 
     var cropLink = document.getElementById("resizeMyPhoto"); 
     cropLink.parentNode.removeChild(cropLink); 
    } 
} 

Das Problem, das ist, wenn ein Benutzer auf den Link zu klicken versucht, er mouseout aus dem Bild tut, und der Link entfernt wird.

Kann jemand eine Lösung vorschlagen?

bearbeitet mit mouseout/mouseleave hat das Problem nicht gelöst.

Answer 1

OK, also habe ich mein Skript geändert, so dass es nicht auf Mosueleave/Mouse Out überhaupt laufen wird. Ich weiß nicht, auf welchem ​​Element die Maus ist und wenn er nicht auf dem Bild ODER dem Link, den ich erstellt habe, entferne ich den Link. hier ist die volle Javascript mit Kommentaren:

iconURL = chrome.extension.getURL("/icons/button-icon.png"); 
// check elements mouse is hover 
document.addEventListener("mouseover", setLink, true); 
// handles creating of the crop link 
function setLink(){ 
var target = event.target; 
if (target instanceof HTMLImageElement){ 
    // make sure no links are visible 
    var cropLink = document.getElementById("resizeMyPhoto"); 
    if (cropLink !== null){ 
     cropLink.parentNode.removeChild(cropLink); 
    } 
    // create the link 
    else{ 
     cropLink = document.createElement("a"); 
     cropLink.setAttribute("class", "resizeMyPhoto"); 
     cropLink.setAttribute("id", "resizeMyPhoto"); 
     cropLink.setAttribute("target", "_blank"); 
     cropLink.innerHTML += "Crop/Resize"; 
     cropLink.href = chrome.extension.getURL("index.html#") + target.src; 
     target.parentNode.style.position = "relative"; 
     target.parentNode.style.display = "inline-block"; 
     target.parentNode.insertBefore(cropLink, target.nextSibling); 
    } 
} 
else{ 
    var cropLink = document.getElementById("resizeMyPhoto"); 
    // make sure mouse is not on link 
    if(target == cropLink || cropLink == null){ 
     return; 
    } 
    // remove the link 
    else{ 
     cropLink.parentNode.removeChild(cropLink); 
    } 
} 

}

Hope this jemand helfen ...