CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-animate
xan
xan

Reputation: 4696

Avoid shift of div on jQuery hover

I have several squares place next to one another. On hover, I want the squares to simply increase in width and ( come above the next div) instead of shifting all the squares on its left. I'm using jQuery for this:

$('.' + c).hover(//'c' is my variable class :`.alpha1` / `.alpha2` / `.alpha3`
    function () {$(this).animate({height:"30%"},500);},
    function () {$(this).animate({height:"22.2287%"},500);});//original height

It is working perfectly but shifting the boxes. On removing the hover, all the squares reset themselves to original state.

My CSS .boxes class:

.boxes,.alpha1 ,.alpha2, .alpha3{
background:rgba(0, 0, 0, .30);
    float:left;
    overflow:hidden;
    width:6.36896%;
    height:22.2287%;
    margin:2px;
    box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
    -moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
    -webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
}

EDIT #1 My jsiddle is here Click on the Event links to activate hover effect.

Upvotes: 0

Views: 199

Answers (1)

lucassp
lucassp

Reputation: 4167

Inside your floating divs add another div like this:

<div class="boxes event1">
   <div class="child">1</div>
 </div>

with the following styling:

.boxes .child {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 100px;
}
.boxes {
  //all your styling plus:
  overflow: visible;
}

and the hover event listener should be added on the .child div. When you hover it extend the height. In this way you won't see shifting. Of course don't miss the colors and styling of the .child div since that's the one you'll be seeing.

Let me know if this is clear enough.

Upvotes: 1

Related Questions