javascript - 仅围绕父元素的 CSS 轮廓

Question

我有一个 div，它有附加的子 div，定位在父 div 之外。

我希望父 div 有一个轮廓 onclick，但轮廓延伸到子 div 周围。

有没有办法让轮廓完全围绕父 div。

我不能使用边框，因为父级 div 已经有边框，我只想使用轮廓来突出显示单击的 div。

fiddle :jsfiddle.net/PZ7eW/1

Answer 1

如果我没有正确理解您的问题，您需要在 div 处于事件状态时更改 border。 outline 覆盖包围元素中所有元素的矩形。

编辑

由于评论，您似乎无法更改边框，也无法为“大纲”使用外包装。您可以尝试使用内部定位元素。请看一下 fiddle 。

另外 div 不能正常接收焦点，因此也不能模糊。您可以通过为元素设置 tabindex 来强制任何元素接收焦点。

看起来 outline 在不同的浏览器中表现不同:在 FF 中它覆盖包含元素中所有元素的矩形，在 Chrome 和 IE 中它只覆盖父元素(这是预期的行为)，在Opera outline 也出现在每个子元素周围。因此，原始问题的答案是:不可能通过简单地更改 outline 来实现。

A demo at jsFiddle .