css - 当它具有焦点时如何显示隐藏的元素？

Question

<div class="row">
    <span class="show-on-hover"><button>Remove</button></span>
    <span class="hide-on-hover">1.00</span>
    <span class="show-on-hover"><input value="1.00"></span>
</div>

我想要一个 CSS 解决方案，以在 div 悬停在上方或输入具有焦点时显示输入。我已经弄清楚了悬停:

div.row .show-on-hover{ display:none; }
div.row:hover .hide-on-hover{ display:none; }
div.row:hover .show-on-hover{ display:inline; }

但是如果输入也有焦点(也包括删除跨度)，我如何保持上述规则？

Answer 1

使用 div 元素的焦点选择器。如果 div/行内的任何元素获得焦点，则焦点将样式应用于 div/行。

div.row .show-on-hover {
  display: none;
}
div.row:hover .hide-on-hover,
div.row:focus-within .hide-on-hover {
  display: none;
}
div.row:hover .show-on-hover,
div.row:focus-within .show-on-hover {
  display: inline;
}