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に一致します。「先行」は、要素が要素の前にあることを意味します。FEEF

最初の子の前に最後の子が来ることをどの程度正確に期待していますか? 「最初」と「最後」の定義により、これはどの要素とも一致しません。

于 2012-06-10T22:07:35.590 に答える