我第二次将鼠标悬停在 div 上时功能不起作用

Question

我有一个小问题，文本是可见的，它在 mouseenter 上完美滚动，在 mouseleave 上隐藏，但是当我再次将鼠标悬停时，该功能不起作用。 这是代码：

$(document).ready(function (){
    var $container = $("#scrollContainer1"),
        $ps = $container.find("p"),
        containerHeight = $container.height(),
        contentHeight = 0,
        scrollTop = 0;

    ($container).hover(function(){
        $ps.each(function() {
            contentHeight += $(this).outerHeight();
        })

        $("<div></div>").css("height", 150).appendTo($container).clone().prependTo($container);

        setInterval(function() {
            if (scrollTop > contentHeight + containerHeight)
                scrollTop = 0;
            $container.scrollTop(scrollTop++);
        }, 20);

    });
    ($container).on("mouseleave", function(){
        scrollTop=0;
        contentHeight=0; 
    });
});

Answer 1

@user2431639：你能不能把你的 HTML 代码也放上去！ 大多数情况下，您必须将 mouseenter 更改为“onmouseover”。

在 HTML 中：

<element onmouseover="SomeJavaScriptCode">

在 JavaScript 中：

object.onmouseover=function(){SomeJavaScriptCode};

Answer 2

我能想到的就是您将新的 div 插入到您的容器中。悬停仅在最顶层执行，并且看起来事件不会向下传播。

我的建议是使用.on() 函数来绑定您的鼠标事件，而不仅仅是悬停。

$container.on("mouseenter", function(event){
  // mouse in
});
$container.on("mouseleave", function(event){
  // mouse out
});

source

现在唯一的问题是，这些事件会在容器内的子元素上触发。所以不能用this 来引用$container。