jquery - 使用 jQuery insertBefore 悬停不正确

Question

我正在开发一个交互式元素，该元素要求用户通过单击一个段落，然后单击第二个段落在第二个段落之前或之后插入第一个段落(取决于它们是否在列表中向上或向下移动段落)

http://jsfiddle.net/5ZQkz/2/

我的问题是，当一个段落被移动到另一个位置时，单击的第二个段落的悬停状态保持事件状态 - 即使该段落没有悬停在上面。这种情况会发生，直到鼠标移动，此时正确的段落显示悬停状态。

例如，单击段落 1，然后单击段落 2。段落会切换位置，但尽管鼠标悬停在段落 1 上，但悬停状态在段落 2 上仍然处于事件状态。 注意 - 此问题不会出现在 Firefox 中。

有什么想法吗？

function swapParas(node1, node2) {
if (node1.index() > node2.index()) node1.insertBefore(node2);
else node1.insertAfter(node2);
node1.hide().fadeIn();
node1.removeClass('selected');
}

Answer 1

.selected:hover {
  background:green;
}

尝试上面的代码。

希望这是您想要的。

这是一个 IE 修复程序。看起来很奇怪，但这就是你能得到的最好的结果:

function swapParas(node1, node2) {
  if (node1.index() > node2.index()) node1.insertBefore(node2);
  else node1.insertAfter(node2);
  node1.removeClass('selected');
  node2.after("<div class='para'>" + node2.html() + "</div>");
  node2.remove();
}