悬停在新元素上后，jQuery.hover（）对旧元素激发

我有一个div，其中嵌套了两个标签，它们是指向其他页面的链接，并且一个挨着另一个

我正在将幻灯片应用于第三个div，该div位于悬停时的标签下

我遇到的问题是，如果我将鼠标悬停在其中一个标签上，然后将鼠标从其中移除，但不移动到下一个标签上，效果会正常工作

如果我直接从一个标签移动到另一个标签，隐藏div的幻灯片将出现在悬停的第一个标签上，而不是当前标签上

HTML:

<div class="top">
<label class="head left" id="home">Welcome - <?php echo $_SESSION['description'] . " (" . $_SESSION['lid'] . ")"; ?>
</label>
<label id="logout" class="head right">Logout</label>

---

只需在标签的父项上侦听鼠标悬停，这样它们就不会被视为mousein/out的两个单独元素：

e、 g

---

JSFiddle:找到了解决方案。问题是在页面中创建的

labelunderscore

div。这“混淆”了jquery库，因为当它应用滑入效果时，它必须在同一个div上应用滑出效果

通过在运行时在函数中创建

labelunderscore

div，并根据悬停元素的id为其分配唯一id，可以对问题进行排序。代码如下：

// Slide in effect for hover on class=head labels
        $(".head").hover(function () {
            //alert($(this).attr('id'))
            $('#main').append('<div id="labelunderscore_' + $(this).attr("id") + '" class="labelunderscore"></div>');
            // Set width to hovering element width:
            $('#labelunderscore_' + $(this).attr("id")).css("width", $(this).width() + 20);
            // Set position on labelunderscore to current element left value
            $('#labelunderscore_' + $(this).attr("id")).css("left", $(this).offset().left);
            // Check where are we hovering. Left side slide from left right from right
            if ($(this).offset().left > $(window).width()/2) {
                // We are on the right side
                $('#labelunderscore_' + $(this).attr("id")).show('slide', {direction: 'right'}, 200);
            } else {
                // Left side
                $('#labelunderscore_' + $(this).attr("id") ).show('slide', {direction: 'left'}, 200);
            }
        }, function () {
            $('#labelunderscore_' + $(this).attr("id")).hide('slide', {direction: 'left'}, 200);
        })

//悬停在class=头部标签上的幻灯片生效
$（“.head”）.hover（函数（）{
//警报（$（this.attr（'id'））
$（'#main'）。附加（''）；
//将宽度设置为悬停元素宽度：
$（'#labelunderscore_'+$（this.attr（“id”））.css（“width”，$（this.width（）+20）；
//将labelunderscore上的位置设置为当前元素左值
$（'#labelunderscore_'+$（this.attr（“id”））.css（“左”，$（this.offset（）.left）；
//检查我们的悬停位置。从左向右从右向左滑动
if（$（此）.offset（）.left>$（窗口）.width（）/2）{
//我们是对的
$（'#labelunderscore'+$（this.attr（“id”）.show（'slide'，{direction:'right'}，200）；
}否则{
//左侧
$（'#labelunderscore'+$（this.attr（“id”）.show（'slide'，{direction:'left'}，200）；
}
}，函数（）{
$（'#labelunderscore'+$（this）.attr（“id”）.hide（'slide'，{direction:'left'}，200）；
})

您可以提供主页和注销html内容吗？您使用的是

in/out

hover方法语法，肯定不是您所期望的。我猜你把这个方法和

mouseover（）

one|Hi混淆了。欧文，我只是想看看效果。页面还没有准备好，在任何情况下，都可以通过.click（）函数处理它们。使用两个处理程序悬停在这里都可以正常工作：您好。修改了小提琴，使标签彼此相邻。如果将鼠标悬停在第一个屏幕上，将鼠标右键滑动，第一个屏幕上会再次出现效果。这是我的问题。我添加了一个边框来区分这两个标签。谢谢你的回答。发现了问题。这是滑动div。基本上，错误是使用相同的

labelunderscore

div。这可能会让jQuery感到困惑，因为在标签上应用隐藏效果时，它必须在另一个但在同一div元素上应用显示效果！通过动态创建div并为其分配uniuqe id，问题已经得到解决。@Fabrizio Mazzoni：这与您描述的问题不同。请将您的解决方案作为答案发布。好的。要我把它添加到问题中吗？@Fabrizio Mazzoni:如果它回答了你的问题，就添加它作为答案。

$(".top").hover(function () {

// Slide in effect for hover on class=head labels
        $(".head").hover(function () {
            //alert($(this).attr('id'))
            $('#main').append('<div id="labelunderscore_' + $(this).attr("id") + '" class="labelunderscore"></div>');
            // Set width to hovering element width:
            $('#labelunderscore_' + $(this).attr("id")).css("width", $(this).width() + 20);
            // Set position on labelunderscore to current element left value
            $('#labelunderscore_' + $(this).attr("id")).css("left", $(this).offset().left);
            // Check where are we hovering. Left side slide from left right from right
            if ($(this).offset().left > $(window).width()/2) {
                // We are on the right side
                $('#labelunderscore_' + $(this).attr("id")).show('slide', {direction: 'right'}, 200);
            } else {
                // Left side
                $('#labelunderscore_' + $(this).attr("id") ).show('slide', {direction: 'left'}, 200);
            }
        }, function () {
            $('#labelunderscore_' + $(this).attr("id")).hide('slide', {direction: 'left'}, 200);
        })