首页 文章

div：折叠边框改变悬停边框半径边框的颜色？

提问于
浏览 次
0

这缝很容易，但我还没有找到任何办法 . 我有3个div（但解决方案必须适用于n个div），如下图所示：

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

例如：

我想要像这样的普通div：

enter image description here

在悬停一个特定的div我希望这个div的所有边框都有这样的另一种颜色：

enter image description here

最后，我不能做什么，我想在这里显示角落：

enter image description here

我想先崩溃所有的边界 . 边界崩溃容易：崩溃 . 但我想在悬停时更改完整单元格的边框颜色（左上角右下边框） . 边框也很容易：1px DOUBLE＃000 . 但是最后（我在这一点上阻止）我还希望在div 1的顶部和左下角以及div 3的顶部和右下角有一个圆角

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

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

css css3

4 回答

  • 1

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

    border-collapse适用于不适用于所有块元素的表 . 当然你仍然可以使用display：table / table-cell . 但悬停仍然存在缺陷，因为折叠的边框将属于第一个元素 - 如果你悬停第二个或第三个元素，左边框将不会改变 .

    只有这样，崩溃边界的边界半径才会发挥作用 .

    我会说你必须采取不同的方法 . 我可能会选择内联块（或者可能更像是“老派”浮动以避免空白问题）元素的边界重叠1px并且更改z-index在：hover中将hovered元素带到顶部并确保其边框是显示的边框 .

    回复于
  • 0

    不太清楚你想要什么，但只是尝试

    .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>
    回复于
  • 0

    这是你想要的吗？

    .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>
    回复于
  • 0

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

    • 在外面响起 . 这使用 first-of-type 和 last-of-type 以及 border-radius 属性 .

    • 重叠边框 .

    对于后者，不是使用z-indices，而是创建右边框并更改颜色 . 然后，下一个 li 的左侧边框被消隐 . 使用相邻的同级选择器（ + ）完成下一个 li 的消隐 .

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

    回复于

相关问题