下面是jsddle。 https://jsfiddle.net/xuhang1128/cmkbu07s/2/ 主要相关代码如下。我使用 React 和 React-boostrap 来实现它。
.design2-statusMonitor {
margin-top: 20px;
.list-group-item {
display: inline-block;
background-color: transparent;
// border: none;
border-right: 1px solid #CAD5E0;
border-top: 1px solid #CAD5E0;
border-bottom: 1px solid #CAD5E0;
width: auto;
&.selected {
background-color: #2f749a;
}
}
.list-group-item:after {
content: "";
width: 9px;
height: 9px;
position: absolute;
right: -6px;
top: 43%;
z-index: 2;
background-color: white;
border-top: 2px solid #CAD5E0;
border-right: 2px solid #CAD5E0;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.list-group-item.selected:after {
content: "";
width: 9px;
height: 9px;
position: absolute;
right: -6px;
top: 43%;
z-index: 2;
background-color: #2f749a;
border-top: 2px solid #CAD5E0;
border-right: 2px solid #CAD5E0;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.list-group-item:hover {
background-color: #c0d5e0;
color: white;
}
.list-group-item:hover:after {
background-color: #c0d5e0;
}
}
你可以看到,当我点击任何一个气泡按钮时,三 Angular 形看起来不正常,如下图所示。 当我把鼠标放在按钮外面,点击其他地方,气泡按钮就正常了?
有人可以帮我解决吗?非常感谢。我已经深入研究并用谷歌搜索了很多,没有结果。
最佳答案
关于javascript - 关于按钮悬停、单击和边框的奇怪 css 问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47787472/