0

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.

8
  • 5
    Could you provide a jsfiddle.net to show your problem. Jan 7, 2013 at 12:55
  • Agree with @RoryMcCrossan It would definitely speed up the resolution of this problem. You may want to look at storing the divs in an absolute position and place them accordingly, since you're already using JavaScript to handle these events, you can use it further to figure out how to align them as well.
    – Duniyadnd
    Jan 7, 2013 at 12:56
  • 1
    @RoryMcCrossan: Jsfiddle: jsfiddle.net/prateeksachan/56yeQ/4 You'll have to click on the event links to activate the effect.
    – xan
    Jan 7, 2013 at 13:01
  • @Duniyadnd: Please see my edited question and the fiddle here: jsfiddle.net/prateeksachan/56yeQ/4
    – xan
    Jan 7, 2013 at 13:03
  • 2
    The best way I can think of to do this would be to add an element inside each of your boxes that is positioned absolutely. Expanding this instead of your actual box will ensure the layout of the box's siblings is not affected. Jan 7, 2013 at 13:08

1 Answer 1

1

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.

2
  • Ya. I tried it. But I'll have to edit the CSS. I can still see the parent behind it.
    – xan
    Jan 7, 2013 at 13:20
  • put some colours there so you don't see it :)
    – lucassp
    Jan 7, 2013 at 13:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.