jquery focus does not trigger css focus

Question

There seems to be a problem when setting focus to an element using jquery. It apparently does not trigger the :focus css property set on an element.

For example in my css I have:

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

in my jquery I have:

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

The focus is set but there is no red border applied to the element.

Answer 1

div elements do not use the :focus selector .. see the CSS2 spec

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

You could do this:

.hoverclass { border:2px solid red; }

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

This uses .hover(), .addClass() and .removeClass()

Answer 2

focus() is only usable with form elements and links, and wont work if you try to use it on other types of elements.

See the jQuery doc for focus() for more information,