how to hide the content of the div in css

Question

I have this html code   lt div id  mybox  gt  aaaaaaa  lt  div gt    and this is my css   mybox     background-color green      mybox hover     background-color red      the question is how to hide the content of the div  aaaaaaa  when the mouse hover event by using css only and without changing the structure of the code  I think I should put some code under  mybox hover but I don t know the code  Thanks in advance for help

User · Answer

sounds silly but font-size 0  might just work  It did for me  And you can easily override this with the child element you need to show

User · Answer

Here is the simplest way to do it with CSS3     mybox hover     color  transparent      regardless of the container color you can make the text color transparent on hover   http   caniuse com  feat css3-colors  Cheers

User · Answer

I would say    x000D   x000D   mybox  x000D    background green    x000D    x000D   x000D   mybox hover  x000D    color transparent  x000D    x000D   lt div id  mybox  gt  x000D    This text will disappear on hover   x000D   lt  div gt  x000D   x000D   x000D    This will hide text  but of course  it still contains the text  but it is a tricky way to hide the text  make in invisible   but it will work well

User · Answer

You could make the text color the same as the background color     mybox hover     background-color  red    color  red

User · Answer

This is a late answer but still  guess setting the color to transparent is the best option    mybox hover  background-color red

User · Answer

Sorry to be 7 years late but this could be achieved by using the below    your-block      visibility  hidden      width  0px      height  0px      This will keep the content on the page and won t occupy any space whereas display none will completely hide the content    Using the above code can be useful if you need to reference code in a div but don t need it to display

User · Answer

Without changing the markup or using JavaScript  you d pretty much have to alter the text color as knut mentions  or set text-indent  -1000em   IE6 will not read the  hover selector on anything other than an anchor element  so you will have to use something like Dean Edwards  IE7   Really though  you re better off putting the text in some kind of element  like p or span or a  and setting that to display  none  on hover

User · Answer

Best way to hide in html css using display none   Example   lt div id  divSample  class  hideClass  gt hi   lt  div gt   lt style gt   hideClass  display none    lt  style gt

User · Answer

x000D   x000D   button   x000D          width  40px  x000D          height  40px  x000D          font-size  0  x000D          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   x000D        x000D   lt button class  button  gt       lt  button gt  x000D   x000D   x000D

User · Answer

There are many ways to do it  One way    mybox hover      display none      Another way    mybox hover      visibility  hidden      Or you could just do    mybox hover      background transparent     color transparent

User · Answer

mybox hover   display  none     mybox hover   visibility  hidden     mybox hover   background  none     mybox hover   color  green      though it should be noted that IE6 and below wont listen to the hover when it s not on an A tag  For that you have to incorporate JavaScript to add a class to the div during the hover

User · Answer

Hiding through CSS is achieved by using either the  visibility  or the  display  attributes  Though both achieve similar results  it s useful to know the differences   If you only want to hide the element but retain the space occupied by it  you should use    mybox hover      visibility  hidden      If you want to hide the element and remove the space occupied by it  so that other elements can take its space  then you should use    mybox hover      display  none      Also remember that IE6 and below do not respond to  hover for anything except A tags  In which case  you ll need some Javascript to change the classname   document getElementById  mybox   className    hide     and define the  hide  class in CSS    hide   display  none

User · Answer

What about opacity    mybox hover       opacity  0

[html] how to hide the content of the div in css

Examples related to html

Examples related to css