CSS наброски исключительно вокруг родительского элемента

Question

У меня есть div, у которого есть дополнительные дочерние div, прикрепленные к нему с позиционированием вне родительского div.

Я хочу, чтобы родительский div имел контур onclick, но контур распространяется вокруг дочерних div.

Есть ли способ иметь контур исключительно вокруг родительского div.

Я не могу использовать границу, поскольку родительский div уже имеет границу, я только хочу использовать контур для hightlight щелкнутого div.

Fiddle: jsfiddle.net/PZ7eW/1

Answer 1

Если я понял ваш вопрос правильно, вы должны изменить border когда div активен. outline охватывает прямоугольник, охватывающий все элементы в элементе.

EDIT

Благодаря комментариям, похоже, что вы не можете изменить границу и не использовать внешнюю оболочку для «набросков». Вместо этого вы можете попробовать внутренний позиционированный элемент. Пожалуйста, взгляните на скрипку.

Также div не может нормально получать фокус, следовательно, он также не может быть размытым. Вы можете заставить любой элемент получать фокус, установив для элемента элемент tabindex.

Похоже outline ведет себя по-разному в разных браузерах: В FF он охватывает прямоугольник, охватывающий все элементы в элементе, в Chrome и IE он охватывает только родительский элемент (который, как ожидается, поведение), в Опере outline происходит вокруг каждого ребенка элемент тоже. Следовательно, ответ на исходный вопрос: невозможно достичь этого, просто изменив outline.

A demo at jsFiddle.