Mouseenter當移動和移除元素

Question

運行並考慮這個片段。

如果我們將最上面一行（「一」）懸停，它會像預期的那樣變成紅色。如果我們點擊它，它將根據計劃被刪除。

但是，由於光標現在位於第二行（「2」），因此我期望「mousenter」觸發並使該行也變爲紅色。但是，如果我們保持鼠標仍然在點擊鼠標時似乎沒有觸發。

有沒有辦法迫使它開火？

function hideMe (elmnt) { 
 
    elmnt.remove() 
 
    // elmnt.style.display = "none" (is an alternative solution 
 
    // that works, but is not what I need) 
 
} 
 

 
function iveBeenHovered (elmnt) { 
 
\t elmnt.style.backgroundColor = "red" 
 
}

div{ 
 
    border: 1px solid black; 
 
}

<div onclick="hideMe(this)" onmouseenter="iveBeenHovered(this)">One</div> 
 
<div onclick="hideMe(this)" onmouseenter="iveBeenHovered(this)">Two</div> 
 
<div onclick="hideMe(this)" onmouseenter="iveBeenHovered(this)">Three</div>

Answer 1

您可以使用nextElementSibling找到下一個元素，並刪除之前提出的背景。

檢查這個代碼：

function hideMe (elmnt) { 
 
    elmnt.nextElementSibling.style.backgroundColor = "red" 
 
    elmnt.remove() 
 
    // elmnt.style.display = "none" (is an alternative solution 
 
    // that works, but is not what I need) 
 
} 
 

 
function iveBeenHovered (elmnt) { 
 
\t elmnt.style.backgroundColor = "red" 
 
}

div{ 
 
    border: 1px solid black; 
 
}

<div onclick="hideMe(this)" onmouseenter="iveBeenHovered(this)">One</div> 
 
<div onclick="hideMe(this)" onmouseenter="iveBeenHovered(this)">Two</div> 
 
<div onclick="hideMe(this)" onmouseenter="iveBeenHovered(this)">Three</div>

Answer 2

你可能會迫使下一個元素iveBeenHovered功能，當您單擊其中之一。

function hideMe (elmnt) { 
    if (elmnt.nextSibling != null){ 
    iveBeenHovered(elmnt.nextSibling); 
    } 
    elmnt.remove() 
}