.hooper JQuery不工作，但其他JS函数正在工作

我正在尝试使用.hoop函数，该函数将把div的大小从50px更改为150px，但是我在网上找到的每个不同的脚本在我当前的文件中都不起作用。

我认为这个脚本有效，因为我以前在不同的项目中使用过它。

这是我的代码：

//sidebar hover animation
$(document).ready(function() {
  $("#Box1").hover(function(event) {
    event.preventDefault();
    if ($('#Box1').hasClass('unpressed')) {
      $('#Box1').css('width', '50px');
      $('#Box1').removeClass('unpressed');
    } else {
      $('#Box1').css('width', '150px');
      $('#Box1').addClass('unpressed');
    }
  });
});

#sidebarBoxes {
  width: 50px;
  position: absolute;
  z-index: 108;
  padding-top: 50px;
}
.sidebarBox {
  height: 51px;
  position: relative;
  background-color: #c1c1c2;
  color: white;
  font-family: 'texgyreadventorregular';
  font-size: 15px;
  line-height: 50px;
}
#Box1 {
  width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sidebarBoxes">
  <div class="sidebarBox" id="Box1">
    art
  </div>
  <div class="sidebarBox" id="Box2">
    art
  </div>
  <div class="sidebarBox" id="Box3">
    art
  </div>
  <div class="sidebarBox" id="Box4">
    art
  </div>
  <div class="sidebarBox" id="Box5">
    art
  </div>
  <div class="sidebarBox" id="Box6">
    art
  </div>
  <div class="sidebarBox" id="Box7">
    art
  </div>
  <div class="sidebarBox" id="Box8">
    art
  </div>
  <div class="sidebarBox" id="Box9">
    art
  </div>
</div>
</div>
</div>

我已经在一个.js文件上加载了javascript，它运行的其他脚本都很好，除了这个。有人知道我可能做错了什么吗？