假设我有一个简单的元素:
<a href="#" id="btn" onclick="return false">Click</a>
现在我可以通过点击使用:active
来改变此元素的外观:
#btn:active {
background: red;
}
但是我希望在点击后该元素能保持红色约一秒钟,而不修改HTML(因此无复选框技巧)或JavaScript。是否有可滥用的聪明技巧实现这一点?
假设我有一个简单的元素:
<a href="#" id="btn" onclick="return false">Click</a>
现在我可以通过点击使用:active
来改变此元素的外观:
#btn:active {
background: red;
}
但是我希望在点击后该元素能保持红色约一秒钟,而不修改HTML(因此无复选框技巧)或JavaScript。是否有可滥用的聪明技巧实现这一点?
回答自己的问题。通过滥用:not
伪类,我们可以在点击事件发生后触发动画:
回答自己的问题。通过滥用:not
伪类,我们可以在点击事件发生后触发动画:
#btn:not(:active) {
/* now keep red background for 1s */
transition: background-color 1000ms step-end;
}
#btn:active {
background: red;
}
但是,如果您需要使用鼠标单击....并在tag中,则需要将焦点设置为对象,因此需要一些javascript
。(这种情况下为内联)
如果您可以使用另一个对象,比如,那么当您进行单击时,focus
会自动设置,但在这种情况下,focus
操作由浏览器提供。
所以,需要内联JS:
<a href="#" id="btn" onclick="this.focus();return false">Click</a>
#btn {
background: yellow;
}
#btn:focus, #btn:active {
-webkit-animation: btn-color 1s forwards linear;
-moz-animation: btn-color 1s forwards linear;
-ms-animation: btn-color 1s forwards linear;
-o-animation: btn-color 1s forwards linear;
animation: btn-color 1s forwards linear;
}
@-webkit-keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }
@-moz-keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }
@-ms-keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }
@-o-keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }
@keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }
this.focus()
,这是不可能的。 - Jan JongboomJS 函数
呢?看看这个:http://jsfiddle.net/s3G7p/2/ (和你的类似,但在 return false;
之前加上了 this.focus();
) - gmo<style>...</style>
还是外部引用的 <link rel="stylesheet" href="">
? - gmo
.uib-daypicker thead:not(:active) + tbody .btn { animation: FadeOutIn 1s linear; }
。非常感谢。 - Florian