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。

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

2 个答案: