Jquery - 是否可以将 css 悬停/焦点行为绑定到键下

Jquery - is it possible to bind css hover/focus behaviours to keydown?

本文关键字:焦点 绑定 悬停 是否 css Jquery      更新时间:2023-09-26

我希望我能简洁地回答我的问题。

假设我定义了一些 css。

.someCSS-name:hover > .list-item,
.someCSS-name:active > .list-item,
.someCSS-name:focus > .list-item { display:block; }

现在,在我的jquery代码中,我如何创建或可能将选项卡按压机与上面的css绑定。让 Tab 键继承了 css 行为吗?

也许我在这里想多了。

<li class="someCSS-name" id="linkoneli">
    <a href="someURL" id="linkonenav">Link One</a>
    <div class="list-item">show this content</div>
</li>

这是一个片段,基本上是该链接上的用户选项卡 - 我有一个弹出窗口显示..但不是显式的事件处理和弹出它等。我希望我可以使用我的 CSS 以某种方式绑定到我的选项卡/按键。可能?因此,选项卡将与"悬停"等相同。

实际上,如果您在锚元素焦点状态上使用 css 选择器,您将达到这种效果。这是您可能需要的代码片段。

#linkonenav:focus ~ .list-item {
  display: block;
}

jsFiddle 只是为了尝试 http://jsfiddle.net/greenrobo/eLCmM/

最简单的方法是在按键时切换 .someCSS 这样

$('.myElements').toggleClass('someCSS');

如果这将打开/关闭悬停的 css。如果您只想切换悬停打开和关闭的任何样式,只需将这些样式移动到 .active 类并切换该类

即可
$('.someCSS').toggleClass('.active');