CODEWITHSUNDEEP
javascripthtmlcss
Anoop
Anoop

Reputation: 23208

how to add border dynamically such that it does not affact layout

I am creating a menu bar where I need to show border on hover. but adding border is disturbed the layout.

How can add border without affecting layout.

Upvotes: 1

Views: 237

Answers (4)

Anoop
Anoop

Reputation: 23208

Instead of adding outline or manipulating height I change the margin of current hovered element.

Upvotes: 0

Riz
Riz

Reputation: 10246

It depends on the border width, if you are using 1 px border then reduce 2 px from width and 2 px from height for each element for which you are adding border.

Upvotes: 2

MOleYArd
MOleYArd

Reputation: 1268

You can use outline instead of border property.

Upvotes: 1

Ariel
Ariel

Reputation: 26753

You have two choices.

Probably best is to add a border even when it's not on hover, but set the color to transparent (or to the background color). Then in the hover only change the background-color:, but not the size or existence of the border.

Or you can use outline: - but check browser support for it first.

Upvotes: 6

Related Questions