Question

I want to show text and when the user hovers this text he should see an input form instead of the text.
When it’s unhovered, it’s replaced by the text again.
But if the user focuses the input form, the input form should stay even if it’s unhovered.

The problem is that if it’s unhovered but the input form is focused, the input form AND the text element are visible (the text element should be hidden).

I’m using this HTML code

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

and this css for this:

.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 here: http://jsfiddle.net/a8U3P/

Does anybody have a clue why this doesn’t work?

EDIT: I tried Firefox 13 and Chromium

Answer 1

The general sibling combinator, E ~ F, matches an F element preceded by an E element. “Preceded” means that the E element comes before the F element.

How exactly do you expect a first child to be preceded by a last child? By the definition of “first” and “last,” this cannot match any elements, ever.