Binding Hoverintent to other elements

231 Views Asked by At

I am trying to have a specific DIV remain open while hovered over a link. I am triggering the hoverintent on the < a >, but it's it goes away on mouseleave. This is expected as the hoverintent is only bound to the < a > but how would you set it up so that it would remain open on the other div?

  <a href="#divid" class="my-class">
    <span class="linkText">Link Text</span>
  </a>
  <div id="divid" class="keepopen"><p> Content </p> </div>

So When I hover, I am adding a class on "keepopen" I want to make sure that it doesn't disappear when I hover on it. Do I have to also bind the hoverintent to this div, in addition to the < a >?

The JS is rather long, but here's the specific area: In this $(this) is the passed < a > with my specific css class, it's apart of a larger function. I also have it customized for keyboard focus and blur and touch events.

//6. Configuration settings for HoverIntent plugin
                var config = {
                    sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
                    interval: defaults.hoverDelay, // number = milliseconds for onMouseOver polling interval
                    over: linkOver, // function = onMouseOver callback (REQUIRED)
                    timeout: defaults.hoveroutDelay, // number = milliseconds delay before onMouseOut
                    out: linkOut // function = onMouseOut callback (REQUIRED)
                };

                //7. If Touch alter the bindings
                if (!defaults.isTouch) {
                    // Initialise HoverIntent
                    $(this).hoverIntent(config);
                    //Click, Focus, Focusout, Blur
                    $(this).on('click', function () {
                        return false;
                    });
                    $(this).on('focus', linkOver);
                    $(this).on('blur focusout', linkOut);

                } else {
                    // Touch Only Event Binding               
                    $('body').on('touchend', linkOut);

                    $(this).on('touchstart', linkOver);

                    $(this).on('touchstart touchend', function (e) {

                        e.stopPropagation();
                        e.preventDefault();
                    });

                    $tooltip.on('touchstart touchend', function (e) {

                        e.stopPropagation();

                    });

                }
0

There are 0 best solutions below