10

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

例如，在我的 CSS 中，我有：

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

在我的 jquery 中，我有：

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

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

4

5 回答 5

9

div元素不使用:focus选择器 .. 参见CSS2 规范

:focus 伪类在元素具有焦点时应用（接受键盘事件或其他形式的文本输入）。

你可以这样做：

.hoverclass { border:2px solid red; }

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

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

于 2012-06-28T12:32:10.707 回答
4

focus()仅可用于表单元素和链接，如果您尝试将其用于其他类型的元素，则无法使用。

有关更多信息，请参见focus() 的 jQuery 文档，

于 2012-06-28T12:32:20.107 回答
2

从手册：

当元素获得焦点时，焦点事件被发送到元素。此事件隐式适用于一组有限的元素，例如表单元素（<input>、<select>等）和链接（<a href>）。在最近的浏览器版本中，可以通过显式设置元素的 tabindex 属性来扩展事件以包括所有元素类型。元素可以通过键盘命令（例如 Tab 键）或通过鼠标单击元素获得焦点。

有关示例，请参见此答案：https ://stackoverflow.com/a/5966034/1013082

于 2012-06-28T12:33:38.623 回答
0

转到 jQuery focus() 页面查看：

当元素获得焦点时，焦点事件被发送到元素。此事件隐式适用于一组有限的元素，例如表单元素（<input>、<select>等）和链接（<a href>）。在最近的浏览器版本中，可以通过显式设置元素的 tabindex 属性来扩展事件以包括所有元素类型。元素可以通过键盘命令（例如 Tab 键）或通过鼠标单击元素获得焦点。

在此处转到 PPK 对浏览器的关注研究

PPK 焦点事件浏览器兼容性

看起来所有浏览器都通过了 tabindex 测试。

于 2012-06-28T12:45:46.320 回答
-1

你需要这样做： 

$("div.item1").focus(function(){
        $("div.item1").css("border","2px solid red");
      });
于 2012-06-28T12:34:05.870 回答