cómo ocultar el contenido del div en css

Question

tengo este código html

<div id="mybox"> aaaaaaa </div> 

y éste es mi css

#mybox{ 
    background-color:green; 
} 

#mybox:hover{ 
    background-color:red; 
} 

la pregunta es cómo ocultar el contenido de la div (aaaaaaa) cuando el evento de desplazamiento del mouse utilizando css solo y sin cambiar la estructura del código Creo que debería poner un código en #mybox:hover, pero no sé el código

Gracias de antemano por ayudar

Answer 1

Sin cambiar el marcado o el uso de JavaScript, tendría que modificar el color del texto a medida que Knut menciona, o establecer texto-sangría: -1000em;

IE6 no leerá el: selector de desplazamiento en ningún elemento que no sea de anclaje, por lo que tendrá que usar algo como Dean Edwards' IE7.

Realmente sin embargo, usted es mejor poner el texto en algún tipo de elemento (como p o span o a) y establecer que a display: none; en vuelo estacionario.

Answer 2

Se podría hacer que el color del texto el mismo que el color de fondo:

#mybox:hover 
{ 
    background-color: red; 
    color: red; 
} 

Answer 3

#mybox:hover { display: none; } 
#mybox:hover { visibility: hidden; } 
#mybox:hover { background: none; } 
#mybox:hover { color: green; } 

aunque debe tenerse en cuenta que IE6 y por debajo suele escuchar el vuelo estacionario cuando no está en una Una etiqueta. Para eso, debes incorporar JavaScript para agregar una clase al div durante el vuelo estacionario.

Answer 4

Ocultar a través de CSS se logra utilizando los atributos "visibilidad" o "mostrar". Aunque ambos logran resultados similares, es útil conocer las diferencias.

Si sólo desea ocultar el elemento, pero mantienen el espacio ocupado por ella, se debe utilizar:

#mybox:hover { 
    visibility: hidden; 
} 

Si desea ocultar el elemento y eliminar el espacio ocupado por la misma, de manera que otros elementos puede tener su espacio, entonces debería usar:

#mybox:hover { 
    display: none; 
} 

recordar también que IE6 y por debajo no responden a: hover para nada excepto a las etiquetas. En cuyo caso, necesitará algo de JavaScript para cambiar el nombre de clase:

document.getElementById('mybox').className = 'hide'; 

y definir la clase de "ocultar" en el CSS:

.hide { display: none; } 

Answer 5

suena tonto, pero font-size: 0; podría funcionar. Lo hizo por mi Y puede anularlo fácilmente con el elemento secundario que necesita mostrar.

Answer 6

mejor manera de ocultar en html/css usando display:none;

Ejemplo

<div id="divSample" class="hideClass">hi..</div> 
<style> 
.hideClass 
{display:none;} 
</style> 

Answer 7

Ésta es una respuesta tardía pero aún así, Guess establecer el color a transparente es la mejor opción.

#mybox:hover{ 
background-color:red; 
} 

Answer 8

yo diría:

#mybox{ 
 
    background:green; 
 
} 
 

 
#mybox:hover{ 
 
    color:transparent; 
 
}

<div id="mybox"> 
 
    This text will disappear on hover 
 
</div>

Esto ocultará el texto, pero, por supuesto, que todavía contiene el texto, pero es una manera difícil de ocultar el texto (make in invisible), pero funcionará bien

Answer 9

Lamentamos tener 7 años de retraso, pero esto se puede lograr utilizando el siguiente:

.your-block{ 
    visibility: hidden; 
    width: 0px; 
    height: 0px; 
} 

Esto mantendrá el contenido en la página y no ocupará ningún espacio mientras que la pantalla: ninguno ocultará completamente el contenido.

Usar el código anterior puede ser útil si necesita hacer referencia al código en un div pero no necesita mostrarlo.

Answer 10

Aquí es la forma más sencilla de hacerlo con CSS3:

#mybox:hover { 
    color: transparent; 
} 

independientemente del color de contenedores se puede hacer que el color de texto transparente en vuelo estacionario.

http://caniuse.com/#feat=css3-colors

Saludos! :)

Answer 11

.button { 
 
     width: 40px; 
 
     height: 40px; 
 
     font-size: 0; 
 
     background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%221284%20207%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1298.5%20222.9C1297.5%20223.6%201296.3%20224%201295%20224%201291.7%20224%201289%20221.3%201289%20218%201289%20214.7%201291.7%20212%201295%20212%201298.3%20212%201301%20214.7%201301%20218%201301%20219.3%201300.6%20220.5%201299.9%20221.5L1302.7%20224.2C1303%20224.6%201303.1%20225.3%201302.7%20225.7%201302.3%20226%201301.6%20226%201301.2%20225.7L1298.5%20222.9ZM1295%20222C1297.2%20222%201299%20220.2%201299%20218%201299%20215.8%201297.2%20214%201295%20214%201292.8%20214%201291%20215.8%201291%20218%201291%20220.2%201292.8%20222%201295%20222Z%22%20fill%3D%22%239299A6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") #f0f2f5 no-repeat 50%; 
 
    }

<button class="button">Поиск</button>

Answer 12

¿Qué pasa con la opacidad

#mybox:hover { 
    opacity: 0; 
} 

Answer 13

Hay muchas maneras de hacerlo:
Una manera:

#mybox:hover { 
    display:none; 
} 

Otra forma:

#mybox:hover { 
    visibility: hidden; 
} 

O usted podría hacer:

#mybox:hover { 
    background:transparent; 
    color:transparent; 
}