Question

我正在为我的网站实施hovercards。悬停卡显示悬停在任何用户名上。我使用mouseenter事件加载hovercard和mouseout来隐藏它。

//HTML
<span class="hover_div">
    <a class="show_hovercard" user_name="gaurav">Gaurav</a>
</span>

// JavaScript
$('.show_hovercard').on({
   'mouseenter': function(e) {
       var $current_node = $(this);
       var $parent = $current_node.parent();
       var markup = "<p class='hovercard'>Gaurav's hovercard</p>";
       $parent.append(markup);
    }
});

$('.hover_div').on({
   'mouseout': function(e) {
        var $hovercard = $(this).find('.hovercard');
        $hovercard.remove();
    }
});

类.hovercard绝对定位。

我希望在从用户名移动到卡片时不会隐藏hovercard。但是当我从用户名移动到hovercard时，悬停卡就会被隐藏起来。该怎么办？

这是工作jsFiddle： http://jsfiddle.net/L6D47/1

Answer 1

我认为你的javascript语法有误。

您的密码：

$('.hover_div').on({
   '.mouseout': function(e) {
        var $hovercard = $(this).find('.hovercard');
        $hovercard.remove();
    }
});

应该是：

$('.hover_div').on({
   'mouseout': function(e) {
        var $hovercard = $(this).find('.hovercard');
        $hovercard.remove();
    }
});

更新：我设法解决了你的问题。将p元素更改为div元素，因为p元素具有边距且不一致。然后将mouseout更改为mouseleave。这是一个工作小提琴：

http://jsfiddle.net/NLXkV/6/

实现hovercard mouseout事件

1 个答案: