Hover, que fassa a div descer

[N3HCMS 0]

Eae galera, eu vim aqui hoje porque estou com uma dificuldade.

 

 

eu tenho essa div:

<div id="Layer6">  <table width="299" border="0" align="center">
    <tr>
      <td height="286" align="center" valign="top"></td>
    </tr>
  </table>
</div>

e o css dela:

#Layer6 {
position:absolute;
top:-283px;
width:333px;
height:400px;
z-index:6;
right: 10px;
}

Queria que al passar o mause, ela descesse, só que já tem um tempo que estou tentando e não consigo.

[reebr 94]

#layer6:hover {   top: 0}

Você quer que ela desça animada? Então adicione uma transição...

#Layer6 {position:absolute;top:-283px;width:333px;height:400px;z-index:6;right: 10px;transition: top 0.4s, bottom 0.4s; -moz-transition: top 0.4s, bottom 0.4s;-webkit-transition: top 0.4s, bottom 0.4s; -o-transition: top 0.4s, bottom 0.4s;}

Webkit > Safari, Chrome;

Moz: Mozilla Firefox;

O: Opera.

 

Para fazer ela descer animada, você deve adicionar transições.

Um exemplo, quando no hover a opacidade do elemento se muda e quando o elemento obtém transição, vai dar um efeito de fadeIn/fadeOut.

 

Um exemplo simples:

.minha-classe {  transition: opacity 0.5s; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; opacity: 0.5; } .minha-classe:hover { opacity: 1.0; }

Opacidade de 0.5 para 1.0 com a transição.

 

Lembre-se que se você apenas adicionar a propriedade transição, nem todos navegadores irão suportar, como o Safari, etc.

 

Você deve adicionar a mesma propriedade com, na frente do texto, -webkit-, você pode duplicar copiando e colando o texto, assim facilitará o trabalho.

-webkit- Chrome e Safari...

-moz- Mozilla Firefox...

-o- Opera...

 

-webkit-transition: -moz-transition:, etc...

 

Dentro da propriedade, você deve acrescentar quais propriedades entraram em transição e seu tempo.

 

transition: top 0.5s; - Transição para a propriedade topo, que termina em 500 milisegundos (0.5s);

transition: 0.5s; - Transição para todas propriedades (quando hover, focus, tudo);

transition: top 0.5s, bottom 0.5s, left 0.5s, right 1.0s; - Transição em mais de 1 propriedade, ao total foram 4 transições. 1.0 = 1 segundo.

 

Para separar as propriedades em transição, você deve usar vírgulas.

transition: top 0.5s, left 0.2s;

#Layer6:hover { bottom: 0px; // Ou seja, down... em baixo. 0px, mude para o valor que deseja descer a div, 0px deixa a permanecer exatamente em baixo, 1px ou mais faz subir um pouco +.Se deseja apenas adicionar + px, você deve acrescentar o caractere.Exemplos:top: -12px; //Topo/cimabottom: +2px; //Inferiorleft: 0px; //esquerdaright: 0px; //direita}

Espero que lhe seja útil.