DIV：收起边框+改变边框的颜色上悬停+圆角半径？(div: collapse border + c

这个缝容易，但我没有找到还没有任何办法做到这一点。我有3个div的（但解决方案必须对于n div的工作），如下面的模式：

| DIV 1 || DIV 2 || DIV 3 |

例如：

我想正常的div像这样：

在一个特定的div的悬停，我想这一切边界div来有另一种颜色是这样的：

最后，我不能这样做，我想喜欢它的角落的节目在这里：

我想先倒所有的边界。这容易边界崩溃：崩溃。但之后，我想也改变满格的边框颜色上悬停（上+左+下+右边缘）。也容易边界：1px的DOUBLE＃000。但去年（我封锁在这一点上）我也想在1区的顶部和底部的左侧和DIV 3的顶部和底部的右圆角

它看起来像边境崩溃：崩溃的影响是没有办法有圆角...所以需要找到另一种解决方案

编辑：我尝试用相对位置和Z-index和它的工作好一点！不过，我需要知道如何通过1px的左侧2个像素在左边，......和n DIV通过N-1个像素的左侧移动第二格，这是第3格？

Answer 1:

其实这是一个稍微复杂一些比你想象的。

边界崩溃是不是所有的块级元素表。当然，你仍然可以使其与显示器的工作：表/表单元格。但悬停仍然是有缺陷的，因为倒塌的边框将属于第一元素 - 如果您将鼠标悬停在第二或第三元素左边框不会改变。

才把缺乏边界半径为折叠边框的用武之地。

我说你必须去一个不同的方法。我可能会去inline-block的（或可能宁愿用“老派”彩车以避免空白麻烦）与边框由1px的重叠和z指数的变化元素：悬停带来悬停元素的顶部，并确保其边框是显示一个。

Answer 2:

真不明白你想要什么，但只是尝试

 .one { width: 80px; height: 40px; display: table-cell; border-collapse: collapse; border: double 1px black; } .one:first-child { border-top-left-radius: 15px; border-bottom-left-radius: 15px; } .one:last-child { border-top-right-radius: 15px; border-bottom-right-radius: 15px; }

 <div> <div class="one"></div> <div class="one"></div> <div class="one"></div> </div>

Answer 3:

是不是你想要的？

 .container { display: table; } .container > div { display: table-cell; width: 80px; height: 40px; text-align: center; vertical-align: middle; border-top: solid 1px gray; border-bottom: solid 1px gray; border-left: solid 1px gray; } .container > div:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .container > div:last-child { border-right: solid 1px gray; border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .container > div:hover { background-color: lightgray; border-color: red; border-right: solid 1px red; }

 <div class='container'> <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div> </div>

Answer 4:

下面是解决这两个问题的解决方案：

大红大紫外侧。这将使用first-of-type和last-of-type和border-radius财产。
重叠的边界。

对于后者，而不是用z折射率玩，会发生什么是正确的边界创建，改变了颜色。然后，接下来的左侧边框li是空白。消隐下一li ，通过使用相邻的兄弟选择器（完成+ ）。

这里有一个Codepen： http://codepen.io/anon/pen/JoyGxJ

文章来源: div: collapse border + change the color of the border on hover + border radius?