Javascript 悬停在另一个对象上时在对象中淡入淡出

当鼠标悬停在另一个元素上时，我想向下滑动工具提示元素

我尝试使用jQuery，但我发现如果我将

鼠标悬停在
countbox1
上，任何东西都不会褪色
countbox1
是一个用javascript制作的计时器

我认为剧本没有错。我认为出于某种原因，它没有检测到jQuery

我还尝试下载jQuery并直接将其放入“src:”中


$（文档）.ready（函数（）{
$（“#countbox1”）.onmouseover（函数（）{
$（“#工具提示”）.fadeIn（）；
});
$（“#countbox1”）.onmouseout（函数（）{
$（“#工具提示”）.fadeOut（）；
});
});
#countbox1{
宽度：400px；
左边距：自动；
右边距：自动；
文本对齐：居中；
字体系列：bebas；
字体大小：70px；
颜色：白色；
游标：默认值；
}
#工具提示{
宽度：500px；
左边距：自动；
右边距：自动；
颜色：白色；
字体系列：mix_-thin；
字号：18px；
文本对齐：居中；
边缘底部：-5px；
显示：无；
}

Wochen:Tage:Stunden:Minuten:Sekunden
宽度：500px；“>
如果您只需要工具提示，就可以在悬停其他内容时进入屏幕，我建议您使用CSS
transition

如果将
嵌套在
#countbox1
中，并在其上放置一个
：hover
-事件，则可以得到您想要的东西

HTML

<div id=home>
    <div id="countbox1">
        <p id="tooltip">Wochen:Tage:Stunden:Minuten:Sekunden</p>
    </div>
    <hr style="width: 500px;">
</div>

。将鼠标悬停在灰色区域上，以便工具提示进入视图

工具提示从顶部进入屏幕的位置。
您应该使用
mouseover
而不是
onmouseover
：


$（文档）.ready（函数（）{
$（“#home”）.mouseover（函数（）{
$（“#工具提示”）.fadeIn（）；
});
$（“#home”）.mouseout（函数（）{
$（“#工具提示”）.fadeOut（）；
});
});
#countbox1{
宽度：400px；
左边距：自动；
右边距：自动；
文本对齐：居中；
字体系列：bebas；
字体大小：70px；
颜色：白色；
游标：默认值；
}
#工具提示{
宽度：500px；
左边距：自动；
右边距：自动；
颜色：白色；
字体系列：mix_-thin；
字号：18px；
文本对齐：居中；
边缘底部：-5px；
显示：无；
}

Wochen:Tage:Stunden:Minuten:Sekunden
宽度：500px；“>
您可能正在使用不推荐的方法

请将代码替换为以下代码，然后重试：

$(document).on('ready',function(){
    $("#countbox1").on('mouseover',function(){
        $("#tooltip").stop(true).fadeIn();
    });
    $("#countbox1").on('mouseout',function(){
        $("#tooltip").stop(true).fadeOut();
    });
});

它是
mouseover
not
onmouseover
同样的
mouseout
not
onmouseout
@Arun是正确的，但是如果你没有具体的需求，我建议使用CSS动画，如果你嵌套了…
$(document).on('ready',function(){
    $("#countbox1").on('mouseover',function(){
        $("#tooltip").stop(true).fadeIn();
    });
    $("#countbox1").on('mouseout',function(){
        $("#tooltip").stop(true).fadeOut();
    });
});