How can I display text that turns into an input form when hovered over, and stays visible even if it's unhovered but the user is interacting with the input form?
The issue is that when the input form is focused while unhovered, both the input form and the text remain visible. The text should be hidden in this case.
This is the HTML code I'm using:
<div class="editable">
<span>hello</span>
<input value="hello" />
</div>
Here is the CSS for this setup:
.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!
Check out the JSfiddle for a live example: http://jsfiddle.net/a8U3P/
Any ideas on why this setup isn't working correctly?
UPDATE: I've tested this on Firefox 13 and Chromium browsers.