html - Keep div displayed when input inside of it has focus -

<div>    <input type="text"/> </div> 

i have div element input inside of it. now, div has display: none property on it. now, when display div (by hovering @ element on site, not important here), can put text in input element. when have focus on input, , accidentally move mouse out of div element, div element disappears. there chance can keep div element displayed when input has focus no matter mouse is?

edit: after editing sergio's example, here problem facing: http://jsfiddle.net/2thmq/1/ (try typing in input field , move mouse away)

use input:focus { display:block; }

demo

only css

div:hover input {     display:block; } input:focus {     display:block; } input {     display:none; } 

if want style parent div possible in css4. far here javascript solution this:

var inp = document.getelementsbytagname('input'); (var = 0; < inp.length; i++) {     inp[i].onfocus = function(){ this.parentnode.style.display='block';}     inp[i].onblur = function(){ this.parentnode.style.display='none';} }; 

demo