jquery focus does not trigger css focus

css, jquery

Solution

`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()`

Problem

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.

Original source

Related problems