将鼠标移到输入框上方。
看起来很不错,这正是我想要的效果。
现在 - 点击并按住一个输入框,看它如何变暗?
松开鼠标按钮并观察它如何立即恢复亮度。
我想通过点击行为来反转此过渡效果:
它应该立即变暗,并在释放鼠标点击后淡出到亮度。
仅使用CSS是否可能实现此目标,同时保留原始悬停效果?
input {
background: #aa7fce;
border: 1px solid #4857bb;
color: #4857bb;
height: 24px;
box-sizing: border-box;
transition: background 0.5s linear 0s;
}
input:hover,
input:focus {
background: #E2C2FD;
transition: none;
}
input:active {
color: #E2C2FD;
background: #4857bb;
transition: background 0.5s linear 0s;
}
<input type="text">
<input type="button" value="go">
<br>
<br>
<input type="text" placeholder="name">
<br>
<input type="text" placeholder="address">
<br>
<input type="text" placeholder="phone">
<br>
<input type="text" placeholder="city">
<br>
<input type="text" placeholder="state">
<br>
<input type="text" placeholder="country">
input:hover, input:focus
中保留了transition:none
属性。 - Aziztransition:none
意味着它将在焦点上使用主要的过渡效果。而在:active
中添加transition:none
则意味着您将覆盖主要的过渡效果。希望现在更清楚了 :) - Vucko