Question

CSS 样式：

.outer {
  position: relative;
  width: 100%;
  height: 200px;
  background-color: #000;
  overflow: hidden;
}

.outer:focus {
  outline: 10px solid #00FF00;
}

.inner {
  position: absolute;
  width: 50%;
  height: 200px;
  background-color: #F0F;
  left: 50%;
}

.inner:focus {
  outline: 10px solid #FFFF00;
}

HTML 代码：

<div tabindex="0" class="outer">
<div tabindex="0" class="inner">

问题：我想使内部div可以使用轮廓边框进行聚焦，但由于overflow: hidden;我不能这样做。这只是一个例子。此外，当焦点在内部div上时，我不想触摸外部div的overflow: hidden，所以这不会发生。也许有一种简单的方法（仅代码，没有imgs-graphics）在可聚焦元素上实现某种边界？

*仅限CSS-HTML代码。没有JS

Answer 1

当聚焦div时，outline使用负偏移量，如下所示：

.inner:focus {
   outline-offset: -10px;
}

该值应等于outline-width。

作为替代方法，您也可以使用插入box-shadow，例如

box-shadow: inset 0 0 0 10px #ff0;

Answer 2

您可以使用::after属性

.inner:focus::after {
    content: "";
    height: 90%;
    outline: 10px solid #ffff00;
    position: absolute;
    top: 10px;
    width: 98.1%;
    z-index: 99999;
}

Answer 3

您可以使用border代替outline并设置box-sizing: border-box

＆＃13;

.outer {
  position: relative;
  width: 100%;
  height: 200px;
  background-color: #000;
  overflow: hidden;
}
.outer:focus {
  outline: 10px solid #00FF00;
}

.inner {
  position: absolute;
  width: 50%;
  height: 200px;
  box-sizing: border-box;
  background-color: #F0F;
  left: 50%;
}
.inner:focus {
  border: 10px solid #FFFF00;
}

＆＃13;

<div tabindex="0" class="outer">
<div tabindex="0" class="inner">

＆＃13;

Answer 4

您可以将 box-shadow: inset 或 outline 与负 outline-offset 一起使用

.inner:focus::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* #1 */
  box-shadow: inset 0 0 0 4px blue;

  /* #2 */
  outline: 4px;
  outline-offset: -4px;
}

将外部溢出设置为隐藏

4 个答案: