jQuery在html中不起作用，我不知道我做错了什么

jQuery not working in html and I don't know what i'm doing wrong

本文关键字：错了 什么 我不知道 html 不起作用 jQuery      更新时间：2023-09-26

我不知道为什么当我鼠标移到div上时什么都没有发生。我可能有一个问题，我如何链接javascript文件，但我查了一下，从我发现的，我这样做是正确的。最重要的是，我找不到任何其他的帮助来解决我的问题。

<html>
<head>
<title>
    Title
</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery.js" type="text/javascript"></script>  
<script type = "text/javascript" src = "script.js"></script>
</head>
<body>
    <div class="menu">Hi</div>
</body>
</html>
CSS

body
{
    background-color: #CCFFFF;
}
.menu
{
    background-color: #666666;
    position: relative;
    top: 0;
    margin: auto;
    text-align: center;
    width: 70px;
    height: 30px;
    font-color: white;
    border-radius: 5px;
}
Javascript

$(document).ready(function(){
    $('div:nth-child(1)').mouseover(function(){
        $('div:nth-child(1)').slideDown('slow');
    });
});

如果您试图实现仍然可以被鼠标移到的不可见的div，则接受的答案将不起作用。slideDown，只适用于具有display: none而不是visibility:hidden的div，但如果您将div设置为display:none，则无法将鼠标放在其上。有一种方法可以让你的鼠标停留在一个不可见的div上，那就是用另一个div来包装它，像这样:

<body>
    <div id="contain">
        <div class="menu">Hi</div>
    </div>
</body>

然后执行这个函数:

$(document).ready(function(){
    $('#contain').on({
        mouseenter: function(){
            $('.menu').slideDown('slow');
        }, mouseleave: function() {
            $('.menu').slideUp('slow');        
        }
    });
});
演示

slideDown处理隐藏的元素，然后显示它们。你有一个div显示，并在鼠标悬停期望它滑下来?(没有意义!)-应用滑动效果的元素是隐藏的，它将工作

哦，您误解了slideDown()函数，它显示匹配的(隐藏的)元素，并带有滑动动作。div是可见的，你应该先隐藏它，然后你可以使用slideDown()来显示它。

<html>
<head>
<title>
    Title
</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery.js" type="text/javascript"></script>  
<script>
    $(document).ready(function(){
        $('div:nth-child(1)').mouseover(function(){
            $('div:nth-child(1)').slideUp('slow');
        });
        $('button').click(function(){
            $('div:nth-child(1)').slideDown('slow');
        });
});
</script>
</head>
<body>
    <div class="menu">Hi</div>
    <button>show</button>
</body>
</html>
相关文章：