0

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

问题是，如果它未悬停但输入表单已聚焦，则输入表单和文本元素是可见的（应该隐藏文本元素）。

我正在使用这个 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!

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

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

编辑：我试过 Firefox 13 和 Chromium

4

1 回答 1

3

一般同级组合,E ~ F匹配一个F元素前面有一个E元素。“Preceded”表示该元素位于该E元素之前F。

您究竟如何期望第一个孩子在最后一个孩子之前？根据“第一个”和“最后一个”的定义，这永远不能匹配任何元素。

于 2012-06-10T22:07:35.590 回答