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

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悬停在OR上或输入具有焦点时显示输入。我已经知道了悬停：

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 / row中的任何元素都被聚焦，则内部焦点将样式应用于div / row。

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;
}

Answer 2

现在，我已经解决了您的问题，如果不使用某种脚本来控制显示/不显示，似乎无法解决您的特定问题。

这是我得到的：

CSS

div:hover input {display:inline;}
input:focus {display:inline;}
input {display:none;}

HTML

<div> 
    <!-- <input id="same" type="button" value="Remove" /> -->
    <span class="hide-on-hover">1.00</span>
    <input id="same" value="1.00">
</div>

结果：http://jsfiddle.net/2thMQ/2/

Answer 3

我认为您正在寻找这样的东西：

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