javascript - 将新元素添加到菜单时，背景会在悬停时闪烁

Question

在简单的菜单上工作，用户可以在其中添加新元素。问题是，当点击最后一个 div(“新元素”)时，新元素被创建并将最后一个元素向右移动，触发悬停(最后一个元素闪烁)

// find elements
var button = $("button")
var container = $('.container');
var newBtn = $('.new');

newBtn.on('click', function() {
	$('<div class="row">blinking new</div>').insertBefore(newBtn)
})

body {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  background: gray;
  height: 30px;
}
.row {
  background: green;;
  width: 100px;
}
.row:hover {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">firstg </div>
  <div class="row">second </div>
  <div class="new row">new item</div>
</div>

Chrome:当悬停目标发生变化时，最新元素的背景会闪烁。
IE11:添加新item时，IE不重绘菜单，保留最新的item悬停状态，即使光标停留在新添加的item上。
是否存在解决此问题的解决方法？

Answer 1

您可以将按钮更改为新元素，然后创建一个新按钮，而不是创建一个新元素并将其插入到按钮之前。这样，悬停状态就会停留在当前元素上，而不必切换:

// find elements
var button = $("button")
var container = $('.container');
var newBtn = $('.new');
function handleClick() {
    var newDiv = newBtn.clone();
    newDiv.insertAfter(newBtn);
    newBtn.html('blinking new');
    newBtn.off('click')
    newBtn = newDiv;
    newBtn.on('click', handleClick);
}
newBtn.on('click', handleClick)

body {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  background: gray;
  height: 30px;
}
.row {
  background: green;;
  width: 100px;
}
.row:hover {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">firstg </div>
  <div class="row">second </div>
  <div class="new row">new item</div>
</div>