触发CSS:非锚元素的活动选择器
如何通过JavaScript(jQuery)为非锚元素触发:active状态?
在查看W3C CSS2规范的第5.11.3节中参考:hover伪选择器以了解触发a的激活时,我发现以下内容让我相信它应该是可能的:
“:在用户激活元素时应用:active伪类。例如,在用户按下鼠标按钮并释放它的时间之间。”
“CSS没有定义哪些元素可能处于上述状态,或状态是如何进入和离开的。脚本可能会改变元素是否对用户事件做出反应,并且不同的设备和UA可能有不同的指向或激活的方式元素“。
谢谢你的帮助!
你不能触发css伪选择器,如:active
使用javascript :active
。 没有可以执行的函数/处理程序,因此即使您trigger
对具有css :active
伪选择器集的元素的click
(例如将背景颜色设置为红色),也不会发生任何事情。
我在搜索完全相同的东西时遇到了这个问题。
基本上我有一个文本区域和一个按钮。 用户按Enter键时会触发button.click。 但是:css中的活动选择器未被触发,因此它不会产生相同的效果。
所以这就是我所做的。 它有点多余,但有效。
在css
/*this is for actual clicks on the button */ .Button:active { position:relative; top:5px; } /* this is for pressing enter instead of clicking the button */ .Button.activate{ position:relative; top:5px; }
然后在jquery
//if enter is pressed, trigger button click $("#textArea").keydown(function(event){ if(event.keyCode == 13){ $("#button").click(); $("#button").addClass('activate'); } }); //if enter is released, remove class $("#textArea").keyup(function(event){ if(event.keyCode == 13){ $("#button").removeClass('activate'); } });