Question

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

HTML

<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');
    });
});

Answer 1

如果您正在尝试实现一个无法隐藏的无形div，那么接受的答案将无效。 slideDown，仅适用于display: none而非visibility:hidden的div，但如果您将div设置为display:none，则无法将鼠标悬停在<body> <div id="contain"> <div class="menu">Hi</div> </div> </body>上。有一个你仍然可以鼠标悬停的隐形div的方法是将它包装在另一个div中：

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

然后执行此功能：

{{1}}

Demo

Answer 2

slideDown适用于隐藏的元素，然后公开它们。您有div正在显示，并且鼠标悬停期望它会向下滑动？（没有意义！） - 将滑动效果应用于隐藏的元素，它将起作用。

Answer 3

哦，你误解了函数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>

jQuery没有在HTML中工作，我也不知道我做错了什么

3 个答案: