如何解决这个悬停问题 [英] How to solve this hover out issue

问题描述

我尝试在按钮上应用悬停和悬停效果，并且div将在悬停的按钮上方弹出.如果用户将鼠标悬停在按钮上方，弹出的div将会消失.

I am trying to apply a hover in and hover out effect on a button and a div will popup above the hovered button. The popup div will disappear if user hover out of the button.

我的问题是，当弹出div弹出并且按钮的悬停事件将启动时，因为此时悬停了div.

My problem is that when the popup div pops and the button's hover out event will kick in because the popup div is hovered at the moment.

$('.helpImg').hover(function(){
    $(this).css({'cursor': 'pointer'});
    tooltip = $(this).next().attr('id');
    $('#tool').show(150);
}, function (){
    $(this).css({'cursor': 'auto'});
    $('#tool').hide(50);
})

在我单击按钮后，#tool div将立即隐藏，因为div位于按钮上方，并且被认为是悬停"

the #tool div will hide right after I click the button becasue the div is above the button and it's considered 'hover out'

无论如何解决这个问题??谢谢.

Anyway to solve this?? Thanks .

更新代码

   $('.helpImg').hover(function(){
            $(this).css({'cursor': 'pointer'});
            toolid=$(this).next().attr('id');
            $('#tooltip-' + toolid).show(150);
        },function (){
            $('#toolip-' + toolid).hide(150);
        })

我无法对弹出式窗口div进行硬编码，因为除非将鼠标悬停在helpImg元素上，否则我不知道ID.

I can't hardcode my popup div because I don't know the ID unless I hover my helpImg element.

推荐答案

这是解决悬停在不同元素等上的问题的方法:

This is how you solve issues with hover on different elements etc :

var timer;

$('.helpImg').on({
    mouseenter: function() {
        clearTimeout(timer);
        $(this).css({'cursor': 'pointer'});
        $('#tool').show(150);
    },
    mouseleave: function() {
        timer = setTimeout(function() {
            $(this).css({'cursor': 'auto'});
            $('#tool').hide(50);
        }, 300);
    }
});

$("#tool").on({
    mouseenter: function() {
        clearTimeout(timer);
    },
    mouseleave: function() {
        $(this).hide(50);
    }
});

FIDDLE

这篇关于如何解决这个悬停问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！