css - para - ¿Cómo puedo hacer que un cuadro de entrada de texto invisible sea visible al pasar el mouse?

mostrar texto al pasar el mouse jquery

Question

¡No parece funcionar para mí!

HTML

 <div id="box1">
     <form action="">
         <input type="string" name="htmlcode" />
     </form>
 </div>

CSS

#box1 {
    width:100px;
    height:100px;
    border-color:black 4px
}
input {
    display:none;
}
a:hover input{
    display:block;
}

la entrada de texto es invisible o visible, pero no responde al vuelo estacionario

Answer 1

No tiene a etiqueta que pueda desplazarse para mostrar la entrada ...

#box1:hover input{display:block;} a #box1:hover input{display:block;} para que se muestre cuando mueva el mouse al recuadro.

border-color:black 4px tampoco es válido. Si desea establecer el color del borde, solo puede darle un color, no un color y tamaño.

Aquí hay una demostración que muestra ambas cosas arregladas.

Answer 2

No tienes <a> en html . Pruebe: div:hover input{display:block;}

Answer 3

en tu CSS necesitas agregar esto

#box1:hover input{display:block;}

Answer 4

 #box1 { 
    width:100px;
    height:100px;
    border:4px solid black;
}
 input {display:none;}
 #box1:hover input{display:block;}​

Como otros mencionaron, no tienes a etiqueta a, así que cambia el objetivo del :hover también.

También se corrigió la declaración de frontera.

http://jsfiddle.net/XZvHh/