CODEWITHSUNDEEP
jqueryhovermouseleavemouseenter
Anush Shetty
Anush Shetty

Reputation: 225

jquery hover in and out

I have 4 boxes within a list. I am trying to set the width to 100% on hover. It works well without setting float:left to the li elements. When float:left is set, the hover over the box on the right flickers on hovering.

The code is here - http://jsfiddle.net/PsYn9/5/

If I hover over box #2, there is flickering. Why does this happen

Upvotes: 1

Views: 263

Answers (4)

spekdrum
spekdrum

Reputation: 1767

This behaviour is normal. It happens because when you hover over the second box the box doesnt fit on the container so it drops to the second row (so float works this way). And when the box drops to the second row is like you stop hover on it so it returns to its original size and position. Then its again on its place and you are hovering over it againg, and so on... This is why its flickering.

Solution: Make the container wider and work with fixed withs for the boxes.

Upvotes: 0

Sourabh Shetty
Sourabh Shetty

Reputation: 41

When the li gets stretched, it's not overlapping the other li, but making room for itself by pushing it. So when you hover over an li on the second column, it itself gets pushed, so you aren't hovering over it anymore.

Upvotes: 4

Ivan Lazarevic
Ivan Lazarevic

Reputation: 371

When you put mouse over that box mouseenter is triggered and width is set 100% and box goes below, so mouse in not over it anymore and mouseleave is triggered so width is set to 48% and box goes on previous position where is still mousecursor, so mouseenter is triggered and width is set 100% and box goes below ...

Upvotes: 0

Manuel van Rijn
Manuel van Rijn

Reputation: 10305

Because onhover the div is stretched to 100% it results in starting below div1. That results in a mouseout, because the mouse isn't hovering on the div...

Upvotes: 0

Related Questions