1px shared: hover border on two elements

Question

Two inline-block elements next to each other.

 .e{border:1px #ccc solid} .e:hover{border-color:#555} 

I would like to reduce the border 1px + 1px between them to a common border 1px .

To illustrate.

 --------- | | | --------- 

Select the first item.

 +++++----- + + | +++++----- 

Select the second item.

 -----+++++ | + + -----+++++ 

It’s easier to reduce the 2px border to 1px by setting either border-right or border-left to 0 , but how do I keep the general 1px border when selecting any item?

No JavaScript.

Answer 1

You can give them a -1px left margin to set boundaries, and then undo that edge on the first. Then adjust the z-index on hover (and remember to position: relative do the z-index ). Something like that:

 .e { border: 1px #ccc solid; position: relative; margin-left: -1px; } .e:first-child { margin-left: 0; } .e:hover { border-color: #555; z-index: 5; } 

Demo: http://jsfiddle.net/ambiguous/XTzqx/

You may need to play a little with :first-child , depending on how your HTML is structured; a couple of other options if :first-child or another pseudo-class will not work:

• Wrap it all in a <div> with padding-left: 1px to avoid margin-left: -1px .
• Add an extra class to the first one that has margin-left: 0 .

Answer 2

Make the state :hover have a 2px border and give it -1px margin on both sides. Make exceptions for :first-child and last-child , assuming you don't need to take care of all the browsers there ... I'm looking at you IE6 / 7