Question

我终于得到了一个奇特的动画片。这是一个悬停事件，触发动画，我希望有一个更大的覆盖悬停。当我只是将悬停应用于父div时，它会给我带来一大堆新问题，这对我来说是不可能的。

相反，我在考虑是否可以将悬停事件转发给子元素？

JS:

$('canvas').hover(  ... functions ... )

在这个小帆布区域，一切都很完美。

HTML:

<div class="parent">
      -> somewhere here is the <canvas> embedded
</div>

因此，每当我悬停<div.parent>时，我都希望<canvas>触发悬停事件。

但请注意：有三列具有相同结构的三倍，因此每个<div.parent>应仅触发包含<canvas>

我希望你能得到我的想法而且我不会说完全公牛***

Answer 1

你可以使用触发器：

 $('canvas').trigger('hover');

然后附上：

$('canvas'.on('hover',function(){
//do something
})

或简单地说，

$('canvas').trigger('hover',function(){
//do something
});

Answer 2

$('canvas').hover(  ... functions ... );

$('.parent').hover(function(){
  $(this).find('canvas').trigger('hover');
);

Answer 3

是的，您可以使用Jquery轻松完成：

$('.parent').hover(function(){
  $(this).find('canvas').trigger('hover');
);

.hover（）方法为mouseenter和mouseleave事件绑定处理程序。您可以使用它在鼠标位于元素中时简单地将行为应用于元素。

$('.parent').on('mousenter mouseleave', function(e) {
    $(this).find('canvas').trigger('hover');
});

它将为画布应用与mouseenter和mouseleave的父元素相同的触发器。

所以

与父canvas绑定mousenter悬停事件。

 $('.parent').on('mousenter', function(e) {
     $(this).find('canvas').trigger('hover');
 });

取消绑定canvas悬停事件与父mouseleave属性。

$('.parent').on('mouseleave', function(e) {
     $(this).find('canvas').hover(over, out);
});

Answer 4

当鼠标悬停在父div上时，你必须将画布添加到画布“活动”，然后删除“活动”类然后删除鼠标。

<script>
   $(".parent").on('mouseover',function(){
      $(this).find( "canvas" ).addClass('active');
   }) .mouseout(function() {
      $(this).find( "canvas" ).removeClass('active');
   });
</script>

演示：http://jsfiddle.net/QHsJ7/2/

应该尝试一下......

jQuery - 是否有可能将鼠标转移到另一个元素？

4 个答案: