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

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

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>