I want to display a div when hovering over a button. The shown div should be clickable and persistent even if I move the cursor from the button into the shown div. However, it should be hidden when moving out of the entire area.
I'm unsure about how to achieve this effect.
var mouseX;
var mouseY;
$(document).mousemove(function (e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
$(".circle-button-small").hover(function () {
mouseX = mouseX;
mouseY = mouseY - 100;
$('.theme-hover').css({
'top': mouseY,
'left': mouseX
}).show('slow');
});
$(".circle-button-small").mouseout(function () {
if ($(".theme-hover").mouseenter()) {
$('.theme-hover').css({
'top': mouseY,
'left': mouseX
}).show('slow');
} else {
$('.theme-hover').hide('slow');
}
});
Update
$(".circle-button-small").hover(
function () {
mouseX = mouseX;
mouseY = mouseY - 100;
$('.theme-hover').css({
'top': mouseY,
'left': mouseX
}).show('slow');
},
function () {
$('.theme-hover').hide('slow');
}
);
http://jsfiddle.net/u2oj799u/6/
Update: The solution provided by jbyrne2007 was helpful, but it feels like a workaround. I'm looking for a solution mentioned in the comments below,
When hovering, I'd like the "theme-hover" to appear near the mouse pointer. Additionally, when exiting the circle-button, if not entering the "theme-hover", the "theme-hover" should be hidden. However, if I enter the "theme-hover," it should remain visible. The above solution feels like a workaround.