我使用 Boostrap 创建箭头按钮。我更改了 css 属性以确保按钮的背景与正文背景相同。我还更改了属性以确保没有边框并且悬停时它保持黑色。问题是当我点击它时,我周围出现了一个蓝色边框,当鼠标没有悬停在它上面时它变成了蓝色。我尝试了很多东西,但都没有用。任何帮助将不胜感激。
<div id="breakArrows">
<h6>Session Break</h6>
<button class="btn btn-info arrowbtn" > <i class="fa fa-arrow-up"></i></button>
<h4 class="arrownum">1</h4>
<button class="btn btn-info arrowbtn" ><i class="fa fa-arrow-down"></i></button>
</div>
<div id="center">
#break{
width:20%;
height:100%;
background-color:black;
float: left;
}
#breakArrows{
width:10%;
height:100%;
background-color:black;
` float:left;
padding-left:23px;
padding-top:175px;
}
.arrowbtn{
background-color:black;
border: none;
padding-left:33px;
padding-top: 10px;
}
.arrowbtn:hover{
background-color:black;
border-color: black;
}
.arrownum{
color:white;
padding-left:33px;
}
h6{
color:white;
}
最佳答案
很可能您将不得不重写 Bootstrap 的 :focus
样式以及 :hover
—— 如果您只是希望 hover 和 focus 样式相同,您可以这样做:
.arrowbtn:hover, .arrowbtn:focus {
background-color:black;
border-color: black;
}
否则只为 .arrowbtn:focus
添加一个单独的规则并使用你想要的任何样式。根据您的设计,您可能还会使用 :active
。
关于html - 点击后按钮颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34967960/