jQuery - 是否可以将鼠标悬停到另一个元素

jQuery - is it possible to foreward hover to another element?

本文关键字：悬停 另一个 元素 鼠标 是否 jQuery      更新时间：2023-09-26

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

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

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

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

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

因此，每次将鼠标悬停在<div.parent>上时，我都希望<canvas>触发悬停事件。

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

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

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

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

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

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

它将对画布应用与鼠标输入和鼠标离开的父级相同的触发器。

所以

将悬停事件与父mousenter绑定canvas。 

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

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

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

你可以使用触发器：

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

然后附加：

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

或者简单地说，

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

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

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

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

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

它应该可以尝试一下..

相关文章：