英文:
React-bootstrap Popover arrow colors are inverted when arrow is vertical vs. horizontal
问题
我有一个使用自定义样式的 react-bootstrap 弹出框（Popover）组件，其中箭头是灰色且透明度为 50%。CSS 如下所示：
.popover .popover-arrow::before, .popover .popover-arrow::after {
border-color: #212529 !important;
opacity: 0.5;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
}
这对水平箭头（当弹出框位于目标的左侧或右侧时）效果良好：
然而，当箭头为垂直方向（弹出框位于目标的上方或下方）时，颜色发生反转，导致箭头变成透明的，而背景是灰色的且透明度为 50%：
我的问题是，为什么会发生这种反转，以及我应该如何修复它？
英文:
I have a react-bootstrap Popover component with custom styling for the arrow (gray color and 50% opacity). The CSS is as follows:
.popover .popover-arrow::before, .popover .popover-arrow::after {
border-color: #212529 !important;
opacity: 0.5;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
}
This works fine for horizontal arrows (when the Popover is left or right of the target):
However, when the arrow is vertical (Popover above or below the target), the colors are inverted to give a transparent arrow on a grey background:
My question is, why does this inversion happen and what can I do to fix it?
答案1
得分: 0
以下是已翻译的CSS部分：
.popover .popover-arrow {
display: block;
opacity: 0.75;
}
.popover[x-placement^=top]>.popover-arrow:after {
border-top-color: #212529;
}
.popover[x-placement^=bottom]>.popover-arrow:after {
border-bottom-color: #212529;
}
.popover[x-placement^=right]>.popover-arrow:after {
border-right-color: #212529;
}
.popover[x-placement^=left]>.popover-arrow:after {
border-left-color: #212529;
}
感谢Michal Duszak提供的这个片段，它为我提供了一些启发。
英文:
Eventually I managed to fix this with the following CSS:
.popover .popover-arrow {
display: block;
opacity: 0.75;
}
.popover[x-placement^=top]>.popover-arrow:after {
border-top-color: #212529;
}
.popover[x-placement^=bottom]>.popover-arrow:after {
border-bottom-color: #212529;
}
.popover[x-placement^=right]>.popover-arrow:after {
border-right-color: #212529;
}
.popover[x-placement^=left]>.popover-arrow:after {
border-left-color: #212529;
}
Thanks to Michal Duszak for this snippet which gave me something to go on.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论