CODEWITHSUNDEEP
htmlcsslayer
andrewb
andrewb

Reputation: 5339

Can I change the overlap order with negative margins in CSS?

I have a list, for which on li:hover the li gains a bottom border (it already had a top one). Unfortunately this results in two adjacent borders, so now 2px wide which is not good. So I figured I could just chuck on a margin-bottom:-1px; on hover and it'd be ok, but unfortunately the bottom element is overlapping the current one, so I'm getting an incorrect border colour.

I wishfully tried doing z-index:1;, but that's not doing anything. To me, that should be the way to do it. Come on W3C!

I can't use position:

Is there any way to have the prior element overlap the next element upon adding negative margin?

For now I'll probably have to do some jQuery hacking, was so close to getting it all done via CSS!

Upvotes: 0

Views: 377

Answers (1)

Devin
Devin

Reputation: 7720

I'm not sure if I understand your question, but just in case, try the adjacent sibling selector . If I understand your question correctly, then the following should work:

li:hover + li{border-top:none !important;}

maybe you don't need the !important declaration, but just in case. Also, with this technique you could use it for the negative margin as you mention (or whatever you need)

Upvotes: 1

Related Questions