Heim > Fragen und Antworten > Hauptteil
P粉0205562312023-09-03 00:08:32
首先,当你点击按钮时,你已经使其获得了焦点,你不需要动态地使其获得焦点。
所以,为什么背景颜色没有改变呢?
因为 background-image
已经覆盖了 background-color
你只需要设置 background
而不是 background-color
.btn:focus { background: #1ACC8D; }
完整的示例,不需要 JS
.theme-dark-btn {
transition: all ease 1s;
background-image: linear-gradient(to left, #1ACC8D, #1ACC8D, #235FCD, #1C4CA3);
background-size: 300%;
background-position: 0 0;
border: 1px solid #1C4CA3;
font-weight: 600;
letter-spacing: 1px;
}
.theme-dark-btn:hover {
background-position: 100% 0;
border: 1px solid #1ACC8D;
}
.theme-dark-btn:focus {
background-color: #1ACC8D;
}
.theme-dark-btn:active {
background-color: #1ACC8D;
}
.btn {
height: 38px;
line-height: 35px;
text-align: center;
padding: 0 18px;
text-transform: uppercase;
transition: background-image .3s linear;
transition: box-shadow .3s linear;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
font-size: 12px !important;
}
.btn:focus {
background: #1ACC8D;
}
<div class="col">
<button class="btn theme-dark-btn" type="button" style="color: white" id="1Year" autofocus>1 Year</button>
<button class="btn theme-dark-btn" style="color: white" id="5Year">5 Years</button>
<button class="btn theme-dark-btn" style="color: white" id="10Year">10 Years</button>
<button class="btn theme-dark-btn" style="color: white" id="20Year">20 Years</button>
</div>