3

我有以下html结构：

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

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

悬停事件更改了输入类，因此我可以更改按钮颜色，但是当鼠标移到包含图标的跨度上时，输入中的悬停类会按预期关闭，并且按钮似乎未处于活动状态。

有没有一种方法可以使悬停事件持续存在，即使我悬停兄弟跨度而不重新排列 DOM？

4

2 回答 2

1

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

谢谢大家帮我集思广益。

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

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

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

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

于 2013-06-10T14:21:23.780 回答
0

如果元素是动态创建的，那么您唯一的选择就是事件委托。

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');
});

检查小提琴

于 2013-06-06T22:24:07.897 回答