javascript - 移动和删除元素时鼠标输入

Question

运行并考虑这里的代码片段。

如果我们将鼠标悬停在顶行(“一”)，它会像预期的那样变成红色。如果我们再点击它，它就会按照计划被删除。

但是，由于光标现在位于第二行(“two”)，因此我希望“mouseenter”会触发并使该行也变为红色。但是，如果我们在单击鼠标时保持鼠标静止，则似乎不会触发。

有办法强制它发射吗？

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

function iveBeenHovered (elmnt) {
	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) {
	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>