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

Question

I finally got a fancy animation working. It is a hover event that triggers the animation and i would like to have a bigger are covered for that hover. It would get me a whole bunch of new problems when i simply apply the hover to the parent div so that's not possible for me.

Instead i was thinking if it is maybe possible to forward a hover event to the child element?

JS:

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

In this little canvas area all works perfect.

HTML:

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

So everytime i hover the <div.parent> i want the <canvas> to trigger a hover event.

But be aware: there are three columns with three times the same structure, so each <div.parent> should only trigger the containing <canvas>

I hope you get my idea and im not talking complete bulls***

without looking the why's???? try `$('.parent').hover(function (e) { $(this).find('canvas').trigger(e.type); });` — Arun P Johny, Oct 24 '13 at 04:00
Check this out OP: http://stackoverflow.com/a/13325647/614152 — Matthew Blancarte, Oct 24 '13 at 04:01

score 1 · Answer 1 · answered Oct 24 '13 at 04:02

1

u can use trigger :

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

and then attach:

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

or simply,

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

answered Oct 24 '13 at 04:02

Vicky Gonsalves

11,593
2
37
58

score 1 · Answer 2 · answered Oct 24 '13 at 04:04

1

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

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

answered Oct 24 '13 at 04:04

skewl84

184
2
9

score 1 · Accepted Answer · edited Oct 24 '13 at 13:11

Yes, you can do it easily with Jquery:

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

The .hover() method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element.

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

It will apply the same triggers for the canvas as the parent for both mouseenter and mouseleave.

So

Bind canvas hover event with parent mousenter.

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

unbind canvas hover event with parent mouseleave property.

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

score 0 · Answer 4 · answered Oct 24 '13 at 04:17

You have to add class to canvas "active" when mouseover on parent dive and remove class "active" when mouseout.

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

Demo: http://jsfiddle.net/QHsJ7/2/

It should work give a try..

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

4 Answers4