.hover JQuery not working, but other JS functions are working

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?

Use this code: $(".sidebarBox").hover(function (event) { event.preventDefault(); if ($(this).hasClass('unpressed')) { $(this).css('width', '50px').removeClass('unpressed'); } else { $(this).css('width', '150px').addClass('unpressed'); } }); — Tushar
– Tushar, Commented Dec 11, 2015 at 3:16
I see that, dang. Weird, cuz I'm using Chrome as well and the results aren't at all the same. Tushar, I'm sure that code is right, but now that I see this I think the problem may lie elsewhere.. You guys have any idea where I should look? — BoldJumping
– BoldJumping, Commented Dec 11, 2015 at 3:26

Yeldar Kurmangaliyev · Accepted Answer · 2015-12-11 03:28:58Z

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>

Collectives™ on Stack Overflow

.hover JQuery not working, but other JS functions are working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related