1px shared :hover border on two elements

Two inline-block开发者_StackOverflow社区 elements next to each other.

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

What I'd like is to reduce the 1px+1px border between them to a shared 1px border.

To illustrate.

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

Select first element.

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

Select second element.

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

It's simple to reduce the 2px border to 1px by setting either border-right or border-left to 0, but how to keep the 1px shared border when either element is selected?

Without JavaScript.

You could give them a -1px left margin to get their borders overlapping and then undo that margin on the first one. Then adjust the z-index on hover (and don't forget position: relative to make the z-index work). Something like this:

.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 might need to play with the :first-child a bit depending on how your HTML is structured; a couple other options if :first-child or another pseudo-class won't work:

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

Make the :hover state have a 2px border and give it -1px margin on both sides. Make exceptions for :first-child and last-child assuming you don't have to care about every browser out there… I'm looking at you IE6/7