*** HOVER *** (html,css)

PHOTO EMBED

Wed Dec 01 2021 17:18:33 GMT+0000 (Coordinated Universal Time)

Saved by @samn #css #html #hover 

<div id="uno">
 <div id="dos">
   <div id="tres">
     <div id="cuatro">
       <div id="cinco"></div>
     </div>
   </div>
 </div>
</div>

<style>  
  #uno{
width: 500px;
height: 300px;
background-color:green;
}
#uno:hover{ background: black}
#dos{
width:450px;
height:250px;
background: yellow;
}
#dos:hover{ background: white}
#tres{
width:400px;
height: 200px;
background: red;
}
#cuatro{
width:350px;
height:150px;
background:blue;
}
#cinco{
width:300px;
height:100px;
background:purple;
}
</style>
content_copyCOPY

*Hover declara como llaves un conjunto de coordenadas( una etiqueta html), dichas llaves abrirán un resultado css. * al desplazar el mouse en la pantalla este toma valores(coordenadas), que al estar siendo declaradas como variables globales estas podrán actuar como llaves, abriendo resultados. * HOVER DECLARA un espacio (definido por el área del elemento) como llaves....................... * Cuando el cursor toma una de esas llaves => acciona un resultado............ * OBSERVACIÓN:: Los hijos están dentro de los padres: el HOVER del hijo afecta a todo los ancestros no importa si este no izo hover en el área definida de sus ancestros; porque guardan una relación de parentesco como unas variables en común ( dentro de esas el hover). *** Conclusión html es lenguaje de marcado basado matemática de conjuntos. "si un conjunto hijo tiene un evento, su padre también lo tendrá, porque el evento sucede dentro de el; pero este evento no pertenecerá al hermano o primo, y advertimos eso por intuición ya que ellos no tiene el evento dentro de su conjunto" ***