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

Question

I am trying to use a .hover function that will change the size of a div from 50px to 150px, however every different script I've found online doesn't work in my current file.

I think this script works because I've used it before in different projects.

Here's my Code:

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

I've loaded the javascript on a .js file, which is running other scripts just fine, except this one. Anyone have any idea what I might be doing wrong?

Answer 1

You don't need JavaScript to do this. You can use CSS :hover selector and describe any rules which should be applied to the elements on 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>