CODEWITHSUNDEEP
htmlcssmenuhover
Francis Lavoie
Francis Lavoie

Reputation: 449

CSS shrink on hover

I'm making a menu with <ul>/<li> and CSS.

Here's what I have so far: https://jsfiddle.net/gANfS/6/

The problem is that if you mouse over the top edge within the 5 pixel margin, it starts getting crazy and going back and forth between the hover and unhovered state because the size of the block grows and shrinks. How can I fix this? When I shrink the li, I don't want to be shrinking the hover area. That would fix it, but I'm not sure how to pull it off. Ideas?

Upvotes: 3

Views: 3172

Answers (3)

PTBG
PTBG

Reputation: 595

this is a hack job...but it will work

instead of magin-top:5px;

do border-top:5px solid black;

if you want your background to to be a different color, just make sure to set the border color to the same color.

Upvotes: 1

Stelian Matei
Stelian Matei

Reputation: 11623

The reason for that is on mouse over, the button moves down and sets a margin-top 5px. Then, if the mouse is over that top edge, the button no longer has "hover" state and it retracts back. When it does get back, it switches to mouse over state and the journey begins again.

You could use padding-top:5px instead of margin-top and set the HOVER effect on the whole container. Padding, as opposed to margin, is space inside the element. That way, when the mouse is over the top edge, it would still be considered as over the element and it will not flicker anymore.

Upvotes: 0

dounyy
dounyy

Reputation: 665

Wrap your li content into a div, then apply your shrinking to that div (.sel div:hover instead of li:hover) and this should make it.

Upvotes: 0

Related Questions