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

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 ：当新项目添加时，IE不重新绘制菜单，最新项目悬停状态将被保留，即使光标停留在新添加的项目上。
如果存在任何解决此问题的解决方法吗？

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

由于您插入新按钮的方式，这种情况正在发生。它插入新按钮并将“新项目”移动到最后。因为“新项目”处于悬停状态，当它被移动时仍处于该状态，但由于您的鼠标现在位于新按钮上，该按钮将获得焦点并变为黄色。

相反，将带有.append()的新按钮插入菜单的末尾（因此，您的鼠标始终位于相同的按钮上，而且一直没有新的聚焦）然后移动“新项目”到菜单末尾，另一个.append()。

换句话说，它是您的:focus CSS选择器和.insertBefore添加导致问题的新内容的方式的组合。使用.append()代替.insertBefore解决了这个问题。

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

newBtn.on('click', function() {
  // Append the new button to the end of the menu
  $(".container").append('<div class="row">blinking new</div>');
  
  // Move the "new item" button to the end of the menu
  $(".container").append(this);
});

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>