Question

我想显示文字，当用户悬停此文字时，他应该看到输入表单而不是文本。当它被取消时，它再次被文本替换。但是，如果用户关注输入表单，即使输入表单未被覆盖，输入表单也应该保留。

问题在于，如果它已被取消但输入形式是聚焦的，则输入形式和文本元素是可见的（文本元素应该被隐藏）。

我正在使用此HTML代码

<div class="editable">
  <span>hello</span>
  <input value="hello" />
</div>

和这个css：

.editable :last-child { display: none; }

.editable:hover > :first-child { display: none; }
.editable:hover > :last-child { display: block; }

.editable > :last-child:focus { display: block; }
.editable > :last-child:focus~:first-child { display: none; } // <- this doesn't work!

JS在这里：http://jsfiddle.net/a8U3P/

有没有人知道为什么这不起作用？

编辑：我尝试过Firefox 13和Chromium

Answer 1

general sibling combinator，E ~ F与F元素前面的E元素匹配。 “Preceded”表示E元素在 F元素之前来自。

您希望第一个孩子在最后一个孩子之前的确如何？根据“第一”和“最后”的定义，这无法与任何元素相匹配。

CSS General兄弟不使用：焦点？

1 个答案: