CODEWITHSUNDEEP
csshoverborder
user1405417
user1405417

Reputation: 27

Error when hovering over my top-bar

As you see in the following image: (I'm not allowed to post images so I've uploaded them on Twitpic, since they're very useful to understand my question)

http://twitpic.com/brvzas

I'm trying to change the top-border colour when hovering over a component of my top-bar. The problem is that everything gets shifted out the bar..I'd like just to change the colour of the margin without shifting anything..I'd like to get this effect (here the border is the bottom one, it's just to make you understand what I'd like to do):

http://twitpic.com/brvzse

I've modified the CSS file in this way:

.top-bar [...]{ background: black; border-top: 10px solid #ffffff; overflow: hidden; }

Any advice?

Upvotes: 0

Views: 128

Answers (2)

Mohammad Batroukh
Mohammad Batroukh

Reputation: 13

Try adding padding to top (10px) and on hover remove the padding and replace it with the border-top: 10px.

So Basically:

.top-bar{
padding-top: 10px;
}

.top-bar:hover{
padding-top: 0px;
border-top: 10px solid #fff; 
}

Hopefully that will solve the issue,

Upvotes: 0

karacas
karacas

Reputation: 2142

Make a border transparent by default:

.top-bar [...]        {border-top: 10px solid transparent}
.top-bar [...]:hover  {border-top: 10px solid #ffffff}

Upvotes: 3

Related Questions