javascript add link on image hover>保持鏈接活動鏈接懸停

我想在圖像上懸停時添加圖像上的鏈接。目前我的JavaScript如下：javascript add link on image hover>保持鏈接活動鏈接懸停

// 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); 
    } 
}

的問題是，當用戶嘗試點擊鏈接，他是從圖像做鼠標移出和鏈接被刪除。

有人可以提出一個解決方案嗎？

編輯使用mouseout/mouseleave沒有解決問題。

來源

2017-07-02 justaguy

[重疊內容鼠標懸停鼠標移出]的可能的複製（https://stackoverflow.com/questions/40574662/mouseover-mouseout-with-overlapping-content） –

對不起，Yosef正在改變： document.addEventListener（「mouseout」，removeCropLink，true）; 發送至： document.addEventListener（「mouseleave」，removeCropLink，true）; 不能解決此問題... 還有其他建議嗎？ – justaguy

好吧，我已經改變了我的腳本，所以它不會在mosueleave/mouse out上運行。我在鼠標懸停在哪個元素上，如果他不在圖像或我創建的鏈接上，我刪除鏈接。這裏是完整的JavaScript與評論：

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); 
    } 
}

}

希望這會幫助別人......

來源

2017-07-03 10:00:12 justaguy

javascript add link on image hover>保持鏈接活動鏈接懸停

回答

相關問題