Hover state of element
<p>I have div if i mouse over on div i need to call a handler and show hover card of user</p>

<p>my problem is when handler is running if i mouse out </p>

<p>but still am getting my hover card</p>

<p>this shouldn't happen </p>

<p>Is there any way in javascript i can know wheather element have hover state are not</p>

<pre><code>showPopup: function() {
    moLikeDisLikeUsers.popup = 'show';
    var url = '/_service/getHoverCardDetails.ashx';
    var pars = Object.toQueryString({ 'prfid': moLikeDisLikeUsers.options.get('profileid'), 'id': moLikeDisLikeUsers.options.get('profileid'), 'ht': "1" });
    var target = 'output-div';

    if (Object.isUndefined(userkey.get(moLikeDisLikeUsers.options.get('profileid'))) || (userkey.get(moLikeDisLikeUsers.options.get('profileid'))) == '') {
        moLikeDisLikeUsers.ajax = new Ajax.Updater(target, url, { method: 'get', parameters: pars, onSuccess: function(transport) {
            var response = transport.responseText || "no response text";
            var data = transport.responseText.evalJSON(true);
            userkey.set(moLikeDisLikeUsers.options.get('profileid'), data);
            if (moLikeDisLikeUsers.popup == 'show') {
                moLikeDisLikeUsers.drawPopup(data);
            }
        }
        });
    }
    else {
        moLikeDisLikeUsers.drawPopup(userkey.get(moLikeDisLikeUsers.options.get('profileid')));
    }
},
hidetip: function() {
    if (moLikeDisLikeUsers.tooltip) {
        AbortAjaxCall(moLikeDisLikeUsers.ajax);
        moLikeDisLikeUsers.popup = 'hidden';
        moLikeDisLikeUsers.tooltip.hide();
    }
},
</code></pre>
