div：collapse border +更改悬停+边框半径上边框的颜色？ [英] div: collapse border + change the color of the border on hover + border radius?

问题描述

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

this seam easy but i didn't find yet any way to do it. i have 3 divs (but the solution must work for n divs) like on the schema below :

| div 1 || div 2 || div 3 |

| div 1 || div 2 || div 3 |

例如：

我想要正常的div像这样：

i want normal div like this :

在悬停特定的div，我想要这个div的所有边框有这样的另一种颜色：

on hover of a particular div i want ALL border of this div to have another color like this :

最后，我不能做，我想要的角落就像这里显示：

and finally, what i can't do, i want corner like it's show here:

>

我想首先折叠所有边框。那容易与边界崩溃：崩溃。但后，我想还要更改悬停（顶部+左+底部+右边框）完整单元格的边框颜色。也很容易与边框：1px DOUBLE＃000。但最后（我在这一点上的块）我也想在div 1的顶部和左下角和div 3的顶部和右下角的一个圆角

i want first to collapse all the border. that easy with border-collapse:collapse. but After i want also to change the border color of the full cell on hover (top + left + bottom + right border). that also easy with border: 1px DOUBLE #000. But last (i block on this point) i want also a round corner on the top and bottom left of div 1 and on the top and bottom right of the div 3

它看起来像边界崩溃：崩溃他们是没有办法有圆角...所以需要找到另一个解决方案

it's look like that with border-collapse:collapse their is no way to have round corner ... so need to find another solution

编辑：我尝试相对位置和z-index，它的工作更好一点！但是我需要知道如何将左边的第2个div乘以1px，左边的第3个div乘以2个像素，...以及左边的n div乘以n-1个像素？

I try with the relative position and z-index and it's work a little better ! however i need to know how to move the 2nd div by 1px on the left, the 3th div by 2 pixels on the left, ... and the n div by n-1 pixels on the left?

推荐答案

实际上这比你想象的要复杂一些。

Actually this is a little more complicated than you think.

不是所有块元素。当然，你仍然可以使它与display：table / table-cell一起使用。
但是悬停将仍然有缺陷，因为折叠的边框将属于第一个元素 - 如果您悬停第2或第3个元素，左边框不会改变。

border-collapse is for tables not for all block elements. Of course you can still make it work with display:table/table-cell. But the hover will still be flawed since the collapsed border will belong to the first element - if you hover the 2nd or 3rd element the left border won't change.

只有这样，折叠边界的边界半径才会起作用。

And only then the lack of border-radius for collapsed border comes into play.

我会说你必须采用不同的方法。我可能会去内联块（或可能而是与老式浮动，以避免空白麻烦）元素边框重叠1px和z-index的变化：hover将hovered元素带到并确保其边框是显示的边框。

I'd say you'll have to go for a different approach. I'd probably go for inline-block (or probably rather with "old-school" floats to avoid whitespace trouble) elements with the borders overlapping by 1px and a change of z-index in the :hover to bring the hovered element to the top and make sure its border is the one displayed.

这篇关于div：collapse border +更改悬停+边框半径上边框的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！