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();
});
}