Javascript 混用jquery产生了意外的结果

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

在将jquery安装到我的站点之前，我的页眉和页脚固定在浏览器的顶部和底部。当我安装jquery时，页眉和页脚由于某种原因消失了。jquery函数运行良好，因为我用自己的函数对其进行了测试。有人知道为什么我的页眉和页脚在使用jquery时会消失吗？谢谢:

忽略大部分代码，只需查看以下JSFIDLE：

Html:

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

.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;
}

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

jquery（script.js）如果需要：

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

.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;
}

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

---

我添加了

框

类，如下所示：

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

标题
页脚

---

mouseenter现在正在工作。检查此项：

请使用firebug工具并检查页眉和页脚的html和css样式。请检查JSFIDLE并让我们知道问题所在：具有box类的

元素在哪里？您发布的代码似乎不足以重现问题。制作一个JSFIDLE复制这个问题将是非常好的。还有，你使用的是哪种浏览器？我试过了，它看起来确实有效，我根据请求添加了一个JSFIDLE链接（对不起，伙计们，我想新加入这个JSFIDLE是最简单的方法了，哈哈）。我仍然存在的问题是，当我使用jquery时，页眉和页脚的背景色没有出现。但文本“页眉”和“页脚”确实会出现。我需要的背景色，以显示比任何东西。谢谢您缺少颜色前的
#
。检查更新：谢谢！真不敢相信我犯了这么简单的错误。