使用 jQuery insertBefore 悬停不正确

Question

我正在开发一个交互式元素，该元素要求用户通过单击一个段落将段落排序为正确的顺序，然后单击第二个段落以在第二个段落之前或之后插入第一个段落（取决于它们是否在列表中上下移动段落）

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

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

例如，单击第 1 段，然后单击第 2 段。段落切换位置，但悬停状态在第 2 段仍处于活动状态，尽管鼠标悬停在第 1 段上。注意 - 此问题不会出现在 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();
}