+ 1

css visibility/display

<html> <head> <meta charset=UTF-8"> <style> .roundcorners{ border-radius: 20px; } body { font-family: courier; } div { border-radius: 20px; font-family: courier; font-size:30px; } .box { float: left; width: 200px; height: 100px; margin: 1em; background-color: orange; text-align: center; .1{ display: none; visibility: hidden; float: left; width: 60%; height: 60%; } .box:hover .1{ display: block; visibility: visible; background-color: orange; } </style> </head> <body> <table width="100%" height="100%"> <tr> <td width="15%" valign="top"> <image src="1.gif" width="100"> <br /> </td> <td width="90%" valign="top" style="background-color:grey;" class="roundcorners" height="100%"> <div class="box"><div class="1"> </div> Grupo 1 </div> <div class="box"><div class="1"> </div> Grupo 2 </div> <div class="box"><div class="1"> </div> Grupo 3 </div> <div class="box"><div class="1"> </div> Grupo 4 </div> <div class="box"><div class="1"> </div> Grupo 5 </div> <div class="box"><div class="1"> </div> Grupo 6 </div> <div class="box"><div class="1"> </div> Grupo 7 </div> <div class="box"><div class="1"> </div> Grupo 8 </div> <div class="box"><div class="1"> </div> Grupo 9 </div> <div class="box"><div class="1"> </div> Grupo 10 </div> <div class="box"><div class="1"> </div> Grupo 11 </div> <div class="box"><div class="1"> </div> Grupo 12 </div> </td> <tr> </table> </body> </html> Why is it not hidding the text i place on the div with class .1?

css

28th Mar 2017, 1:49 PM

Tiago Leite

1 Answer

+ 12

1) you forgot a '}' before .1 2) '.1' is not a valid name! no numbers at the beginning are allowed use something like 'first' instead and don't forget to replace it in both the html and css

28th Mar 2017, 2:20 PM

Kamil