Javascript 将新项目添加到菜单时，悬停时背景闪烁

使用简单菜单，用户可以在其中添加新项目。问题是，当单击最后一个div（“新建项”）时，会创建新项并将最后一个项向右移动，触发悬停（最后一个项闪烁）

//查找元素
变量按钮=$（“按钮”）
var container=$（'.container'）；
var newBtn=$（'.new'）；
newBtn.on（'click'，function（）{
$（“闪烁新”）.insertBefore（newBtn）
})

正文{
保证金：0；
填充：0；
}
.集装箱{
显示器：flex；
背景：灰色；
高度：30px；
}
.行{
背景：绿色；；
宽度：100px；
}
.行：悬停{
背景：黄色；
}

第一
第二
新项目

您可以将按钮更改为新元素，然后创建新按钮，而不是创建新元素并将其插入按钮之前。这样，悬停状态保持在当前元素上，不必切换：

//查找元素
变量按钮=$（“按钮”）
var container=$（'.container'）；
var newBtn=$（'.new'）；
函数handleClick（）{
var newDiv=newBtn.clone（）；
新版本插入器（新版本）；
html（'blinking new'）；
newBtn.off（'单击'）
newBtn=newDiv；
“点击”按钮上的新按钮；
}
新按钮（'click'，handleClick）

正文{
保证金：0；
填充：0；
}
.集装箱{
显示器：flex；
背景：灰色；
高度：30px；
}
.行{
背景：绿色；；
宽度：100px；
}
.行：悬停{
背景：黄色；
}

第一
第二
新项目

您可以将按钮更改为新元素，然后创建新按钮，而不是创建新元素并将其插入按钮之前。这样，悬停状态保持在当前元素上，不必切换：

//查找元素
变量按钮=$（“按钮”）
var container=$（'.container'）；
var newBtn=$（'.new'）；
函数handleClick（）{
var newDiv=newBtn.clone（）；
新版本插入器（新版本）；
html（'blinking new'）；
newBtn.off（'单击'）
newBtn=newDiv；
“点击”按钮上的新按钮；
}
新按钮（'click'，handleClick）

正文{
保证金：0；
填充：0；
}
.集装箱{
显示器：flex；
背景：灰色；
高度：30px；
}
.行{
背景：绿色；；
宽度：100px；
}
.行：悬停{
背景：黄色；
}

第一
第二
新项目

这是因为您插入新按钮的方式。它插入新按钮并将“新项目”移动到末尾。因为“新项目”处于悬停状态，当它移动到上方时，它仍然处于该状态，但是因为您的鼠标现在位于新按钮上，该按钮获得焦点并变为黄色

相反，将带有

.append（）

的新按钮插入菜单末尾（因此，您的鼠标一直停留在同一按钮上，并且根本没有新的对焦），然后使用另一个

.append（）

将“新项”移动到菜单末尾

换句话说，是您的

：focus

CSS选择器和添加新内容的

.insertBefore

方式的组合导致了问题。使用

.append（）

而不是

.insertBefore

解决了这个问题

//查找元素
变量按钮=$（“按钮”）
var container=$（'.container'）；
var newBtn=$（'.new'）；
newBtn.on（'click'，function（）{
//将新按钮附加到菜单的末尾
$（“.container”）.append（'blinking new'）；
//将“新建项目”按钮移到菜单的末尾
$（“.container”）。追加（此）；
});
正文{
保证金：0；
填充：0；
}
.集装箱{
显示器：flex；
背景：灰色；
高度：30px；
}
.行{
背景：绿色；；
宽度：100px；
}
.行：悬停{
背景：黄色；
}

第一
第二
新项目
这是因为您插入新按钮的方式。它插入新按钮并将“新项目”移动到末尾。因为“新项目”处于悬停状态，当它移动到上方时，它仍然处于该状态，但是因为您的鼠标现在位于新按钮上，该按钮获得焦点并变为黄色

相反，将带有
.append（）
的新按钮插入菜单末尾（因此，您的鼠标一直停留在同一按钮上，并且根本没有新的对焦），然后使用另一个
.append（）
将“新项”移动到菜单末尾

换句话说，是您的
：focus
CSS选择器和添加新内容的
.insertBefore
方式的组合导致了问题。使用
.append（）
而不是
.insertBefore
解决了这个问题


//查找元素
变量按钮=$（“按钮”）
var container=$（'.container'）；
var newBtn=$（'.new'）；
newBtn.on（'click'，function（）{
//将新按钮附加到菜单的末尾
$（“.container”）.append（'blinking new'）；
//将“新建项目”按钮移到菜单的末尾
$（“.container”）。追加（此）；
});
正文{
保证金：0；
填充：0；
}
.集装箱{
显示器：flex；
背景：灰色；
高度：30px；
}
.行{
背景：绿色；；
宽度：100px；
}
.行：悬停{
背景：黄色；
}

第一
第二
新项目
当你说“闪烁”时，你真的是说新项目最初是黄色的吗？它在Chrome上闪烁（黄色到绿色），但在IE11上的行为更糟糕，添加项目后仍然是黄色。当你说“闪烁”时，你真的是指新项目最初是黄色的吗？它在Chrome上闪烁（黄色到绿色），但在IE11上的行为更糟糕，添加项目后，它仍为黄色。