javascript - 搞乱 jquery 产生了意想不到的结果

Question

在阅读之前，请注意我是 jquery、html 和 css 方面的初学者。

在将 jquery 安装到我的网站之前，我将页眉和页脚固定在固定位置，以便它们粘在浏览器的顶部和底部。当我安装jquery时，页眉和页脚由于某种原因消失了。当我用我的函数测试它时，jquery 函数工作得很好。有人知道为什么我的页眉和页脚在使用 jquery 时消失吗？谢谢:

忽略大部分代码，只看这个jsfiddle: http://jsfiddle.net/w1bpmkn5/

HTML:

<div class="header"></div>
<div class="footer"></div>
<script src="jquery-2.1.3.min.js"></script>
<script src="script.js"></script>

CSS:

.header {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:50px;
    background-color: 1a1a1a;
    z-index: 100;
}

.footer {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:50px; 
    background-color: 1a1a1a;
    z-index: 100;
}

jquery (script.js)(如果需要):

$(document).ready(function(){
    $(".box").mouseenter(function(){
        $(this).fadeTo("slow", 1);
    });
    $(".box").mouseleave(function(){
        $(this).fadeTo("slow", 0.5);
    });
});

Answer 1

我添加了 box 类，如下所示:

<div class="header box">Header</div>
<div class="footer">Footer</div>

mouseenter 正在工作。 checkin :JSFIDDLE