javascript - JQuery 加载但不起作用

标签 javascript jquery html css

正在测试一些 JQuery 的东西(我是新手)但是我不能让 jQuery 工作! 首先它工作了两到三次,然后它停止工作(很奇怪)所以我改变了一些东西,现在它根本不起作用。 JQuery 和 script.js 加载但似乎不起作用

index.html

<!DOCTYPE html>
<html>
    <head>
        <script src="jquery-2.1.4.min.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Sansita+One" />
        <link href="main.css" rel="stylesheet" type="text/css" />
        <script src="script.js" type="text/javascript"></script>
        <title>Manuel Pepe</title>
    </head>
    <body>
        <div id="nav-bar" class="nav-bar">
            <div id="container">
                <img id="nav-button" class="nav-button" src="imgs/menu.png" />
                <div id="nav-menu" class="nav-menu">
                </div>
            </div>
        </div>
        <div class="front-page">
            <div class="logo">
                <h1>Manuel Pepe</h1>
                <h3>Test</h3>
            </div>
        </div>
    </body>
</html>

ma​​in.css

html{
position:relative;
height:100%;
background-color: #6E6E6E; 
}

#container{}

.nav-button{
    position:absolute;
    margin-top: -2px;
    margin-left: 7px;
    width: 32px;
    height: auto;
    z-index:1;
} 

.nav-menu{
    background-color:#424242;
    position:absolute;
    top:0px;
    left:0px;
    width: 200px;
    height:100%;
}

.logo{
    position: relative;
    top:250px;
    left:0;
    right:0;
    bottom:0;
    margin: auto;
    width: 225px;
}

.logo h3, h1{
    text-align:center;
    font-family: Sansita One;
    color: #222;
    text-shadow: 0px 2px 3px #555;
}

.logo h1{
    margin-bottom: 3px;
}

.logo h3{
    margin-top: 2px;
}

.hover-rotate:hover {
  -ms-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);

}

script.js

$(document).ready(function(){
    $("#nav-button").mouseover(function(){
        $(this).addClass("hover-rotate");
    });
    $("#nav-button").mouseleave(function(){
        $(this).removeClass("hover-rotate")
    })
});

为什么这不起作用?

还有,有什么办法可以改进JQuery代码吗?

最佳答案

您可以使用 $() 构造函数代替 $(document).ready(function(){...:

$(function () {

   $("#nav-button").mouseover(function(){
        $(this).addClass("hover-rotate");
    });
    $("#nav-button").mouseleave(function(){
        $(this).removeClass("hover-rotate")
    })

});

关于javascript - JQuery 加载但不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30329287/

相关文章:

javascript - 为什么我不能让我的 javascript(石头剪刀布游戏)在我的网站上显示输出?

javascript - 修改数据表按钮操作

javascript - iframe 动态调整高度

html - 所选类会关闭导航菜单

javascript - 添加 SlideToggle 效果下拉菜单

javascript - 为什么 FireFox 不能正确显示我的文本 (Arial)

javascript - 在 Blockly 上返回 block

javascript - 在 ng-repeat 之外传递对象

javascript - 为什么在 alpha 动画之后图形在 IE 中有丑陋的黑色边框?

python - 使用漂亮的汤通过python解析