come nascondere il contenuto del div in css

Question

Ho questo codice html

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

e questo è il mio css

#mybox{ 
    background-color:green; 
} 

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

la domanda è come nascondere il contenuto del div (aaaaaaa) quando l'evento del mouse passa sopra usando css solo e senza modificare la struttura del codice Penso che dovrei mettere un po 'di codice sotto #mybox:hover ma non conosco il codice

Grazie in anticipo per l'aiuto

Answer 1

Senza modificare il markup o utilizzare JavaScript, è necessario modificare il colore del testo come menzionato da knut o impostare il rientro del testo: -1000em;

IE6 non leggerà il selettore hover su qualsiasi elemento diverso da un elemento di ancoraggio, quindi sarà necessario utilizzare qualcosa come Dean Edwards' IE7.

realtà, però, è meglio mettere il testo in una sorta di elemento (come p o span o a) e l'impostazione che a display: none; al passaggio del mouse.

Answer 2

Si potrebbe fare il colore del testo lo stesso del colore di sfondo:

#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; } 

anche se va notato che IE6 e al di sotto solito ascoltano il passaggio del mouse quando non è su un Un tag. Per questo è necessario incorporare JavaScript per aggiungere una classe al div durante l'hover.

Answer 4

Nascondere tramite CSS si ottiene utilizzando gli attributi "visibilità" o "visualizzazione". Sebbene entrambi raggiungano risultati simili, è utile conoscere le differenze.

Se si desidera solo per nascondere l'elemento ma mantengono lo spazio occupato da esso, si dovrebbe usare:

#mybox:hover { 
    visibility: hidden; 
} 

Se si desidera nascondere l'elemento e rimuovere lo spazio occupato da esso, in modo che altri elementi può prendere il suo spazio, quindi si dovrebbe utilizzare:

#mybox:hover { 
    display: none; 
} 

ricordiamo inoltre che IE6 e al di sotto non rispondono a: hover per qualsiasi cosa, tranne un tag. In questo caso, avrete bisogno di un po 'di Javascript per cambiare il nome di classe:

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

e definire la classe di "nascondere" in CSS:

.hide { display: none; } 

Answer 5

suona stupido, ma font-size: 0; potrebbe funzionare. Lo ha fatto per me. E puoi facilmente sostituirlo con l'elemento figlio che devi mostrare.

Answer 6

modo migliore per nascondere in html/css usando display:none;

Esempio

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

Answer 7

Questa è una risposta in ritardo, ma ancora, indovinare l'impostazione del colore a trasparente è l'opzione migliore.

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

Answer 8

direi:

#mybox{ 
 
    background:green; 
 
} 
 

 
#mybox:hover{ 
 
    color:transparent; 
 
}

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

Ciò nascondere il testo, ma, naturalmente, contiene ancora il testo, ma è un modo difficile da nascondere il testo (rendere invisibile), ma funzionerà bene

Answer 9

Ci scusiamo per 7 anni di ritardo, ma è possibile ottenerlo utilizzando il codice seguente:

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

Ciò manterrà il contenuto della pagina e non occuperà alcuno spazio mentre il display: nessuno nasconderà completamente il contenuto.

L'utilizzo del codice precedente può essere utile se è necessario fare riferimento a un codice in un div ma non è necessario visualizzarlo.

Answer 10

Ecco il modo più semplice per farlo con CSS3:

#mybox:hover { 
    color: transparent; 
} 

indipendentemente dal colore del contenitore è possibile rendere il colore del testo trasparente al passaggio del mouse.

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

Cheers! :)

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

Che dire opacità

#mybox:hover { 
    opacity: 0; 
} 

Answer 13

Ci sono molti modi per farlo:
Un modo:

#mybox:hover { 
    display:none; 
} 

Un altro modo:

#mybox:hover { 
    visibility: hidden; 
} 

Oppure si può semplicemente fare:

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