css - 使 div 可聚焦并在选择上应用父链接

Question

可以使链接的子链接而不是链接本身可聚焦。但是是否也可以在进入时点击父链接？ (没有 javascript)所以在下面的例子中，如果 div 被聚焦，我想进入谷歌。

.padded-button {
  display: inline-block;
  padding: 20px;
  cursor: default;
}
.button {
  padding: 10px;
  background-color: blue;
  display: inline-block;
  color: #fff;
  cursor: pointer;
}

<a href="http://google.com" class="padded-button" tabindex="-1">
    <div class="button"  tabindex="0">button</div>
</a>

注意:我正在尝试创建一个按钮，如果您将它与鼠标/键盘一起使用，它就像一个普通按钮，但具有更大的触摸区域。

Answer 1

没有 js 就完全不可能。您可以将样式应用于子元素上的假焦点，即:

.padded-button:focus .button{ outline: 3px solid red; }

但是如果您真正关注 anchor 标记的子元素，则按 enter 键不会冒泡到父元素。

https://jsfiddle.net/Lentqf4u/