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