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) {
	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查找下一个元素，并在删除之前放置背景。

检查此代码：

＆＃13;

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"
}

＆＃13;

div{
  border: 1px solid black;
}

＆＃13;

<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>

＆＃13;

Answer 2

当您单击其中一个元素时，可以强制iveBeenHovered函数用于下一个元素。

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

移动和移除元素时的Mouseenter

2 个答案: