Question

我有以下html结构：

<span>
  <label>
    <input this is my button's area  />
    <span> this is the svg icon</span>
  </label>
</span>

我有一个影响我的输入的jQuery悬停事件，并且跨度绝对位于输入区域内，因此它在视觉上方位于其上方。

悬停事件会更改输入类，以便我可以更改按钮颜色，但是当鼠标移动到包含图标的跨度上时，输入中的悬停类会关闭，可预测，并且按钮似乎不是活性

有没有一种方法可以使悬停事件持续存在，尽管我在没有重新排列DOM的情况下将兄弟跨度悬停？

Answer 1

如果元素是动态创建的，那么您拥有的唯一选项就是事件委派。

hover无法委派。但您可以附加可以委派的mouseenter和mouseleave

试试这个

$('#btn-create').on('click', function () {
    $('#container').append($('#spanTemplate').clone().attr('id', ''));
});

$('#container').on('mouseenter', 'label', function (e) {
    $('input', e.currentTarget).addClass('a');
}).on('mouseout', 'label', function (e) {
    $('input', e.currentTarget).removeClass('a');
});

<强> Check Fiddle

Answer 2

为我工作的是什么，包括一个新的兄弟div，绝对位于输入之上。就这样，悬停效果很好，最重要的是，点击事件不受影响。

谢谢大家帮助我集思广益。

UPDATE ：仍然存在一些问题：在IE中，悬停只在鼠标位于按钮边框（!!）上方时才有效。当您将鼠标悬停在绝对定位的div或输入上时，悬停事件将被取消。有什么想法吗？我找不到合乎逻辑的解释。

（记得在IE中打开此链接以复制问题，并在chrome / ff中查看预期的行为。）

$('.xtraBlock ').mouseover(function(){
    $('.popup').hover();
});

http://jsfiddle.net/3mrpJ/10/embedded/result/

在输入上悬停svg图标被中断

2 个答案: