jquery 焦点不会触发 css 焦点

Question

使用 jquery 将焦点设置到元素时似乎有问题。它显然不会触发元素上设置的 :focus css 属性。

例如在我的 CSS 中我有:

div.item1:focus { border:2px solid red; }

在我的 jquery 中我有:

$("div.item1").focus();

焦点已设置，但元素上没有应用红色边框。

Answer 1

div 元素不使用 :focus 选择器。参见 the CSS2 spec

The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).

你可以这样做:

.hoverclass { border:2px solid red; }

$("div.item").hover(function() {
  $(this).addClass('hoverclass')
},function() {
  $(this).removeClass('hoverclass')
});

这使用 .hover() , .addClass()和 .removeClass()