.hover JQuery无法正常工作，但其他JS功能正在运行

Question

我正在尝试使用.hover函数将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，除了这个之外，它运行其他脚本就好了。任何人都知道我可能做错了什么？

Answer 1

您不需要JavaScript来执行此操作。您可以使用CSS :hover选择器并描述应该应用于悬停时元素的任何规则：

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

.sidebarBox:hover {
  width: 150px;
  background-color: #999999;
}

<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>