1

我终于有一个花哨的动画工作。这是一个触发动画的悬停事件，我希望为该悬停覆盖更大的内容。当我简单地将悬停应用到父 div 时，它会给我带来一大堆新问题，所以这对我来说是不可能的。

相反，我在想是否有可能将悬停事件转发给子元素？

JS:

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

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

HTML:

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

所以每次我悬停时，<div.parent>我都希望<canvas>触发悬停事件。

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

我希望你明白我的想法，我说的不是完全的公牛***

4

4 回答 4

1

是的，您可以使用 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将悬停事件与 parent绑定mousenter。

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

canvas将悬停事件与父mouseleave属性解除绑定。

$('.parent').on('mouseleave', function(e) {
     $(this).find('canvas').hover(over, out);
});
于 2013-10-24T05:55:42.790 回答
1

你可以使用触发器：

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

然后附上：

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

或者简单地说，

$('canvas').trigger('hover',function(){
//do something
});
于 2013-10-24T04:02:36.117 回答
1 
$('canvas').hover(  ... functions ... );

$('.parent').hover(function(){
  $(this).find('canvas').trigger('hover');
);
于 2013-10-24T04:04:17.917 回答
0

当鼠标悬停在父潜水时，您必须将类添加到画布“活动”，并在鼠标移出时删除“活动”类。

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

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

应该可以试一试..

于 2013-10-24T04:17:41.203 回答