Ir ao conteúdo
  • Cadastre-se
Lerub

CSS Problema com "fade in out"

Posts recomendados

Eu  não estou conseguindo fazer o fade-in-out no background do submenu. O fade parece funcionar bem com a tag <a> mas não funciona com a <li>.

 

Segue os códigos:

 


.theblogmenu {
position:relative;
left:16%;
width:63%;
}

.theblogmenu ul {
    list-style:none;
    margin:0;
    padding:0;
}

.theblogmenu ul:before,.theblogmenu ul:after {
    content:"";
    display:table;
}
.theblogmenu ul:after {
    clear:both;
}
.theblogmenu ul > li {
    float:left;
    position:relative;
}
.theblogmenu a {
    display:block;
    padding:10px 20px;
    line-height:1.2em;
    text-decoration:none;
font-weight:bold;
color:     #ffbc69;

font-size:233%;
}
.theblogmenu a:hover {
    text-decoration:none;
    background:#595959;

}
.theblogmenu li ul {
    background:rgba(130,130,130,0.86);
  position:absolute;
    left:0;
    top:64px;
    z-index:1;
}
.theblogmenu li ul li {
    width:auto;
 overflow:hidden;
    height:0;

}
.theblogmenu li ul a {
    border:none;
transition:background ease;
}
.theblogmenu li ul a:hover {
    background:rgba(255,181,197,0.2);

}

.theblogmenu ul > li:hover ul li {
    height:auto;
font-size:63%;
transition:background 0.635s;

}

 

 

        <div class="theblogmenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog/parceria">Parceria</a></li>
<li><a href="#">Mais</a>
<ul class="dropdown-content">
<li><a href="/blog/category/musica">Musica</a></li>
<li><a href="/blog/category/filme">Filmes</a></li>
<li><a href="/blog/category/serie">Séries</a></li>
    <li><a href="/blog/category/animacao">Animação</a></li>
    <li><a href="/blog/category/origem">Origem</a></li>
    <li><a href="/blog/category/suite">Suíte</a></li>
    <li><a href="/blog/category/suitenews">Suítenews</a></li>
    <li><a href="/blog/category/art">Art</a></li>
    <li><a href="/blog/category/cinema">Cinema</a></li>
</ul>
</li>
    
</ul>
</div>

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Lerub 

 

Na class ".theblogmenu ul > li:hover ul li" você especifica que a propriedade que vai receber o efeito de transition é a propriedade background, porém você só manipula as propriedade font-size e height.

 

Para resolver isso basta modificar a propriedade que vai receber o efeito de transition

 

de:

transition: background 0.635s;

para:

transition: font-size 0.635s;
-o-transition: font-size 0.635s;
-moz-transition: font-size 0.635s;
-webkit-transition: font-size 0.635s;

Não é necessário especificar a propriedade de transition, assim todas as propriedade vão receber o efeito de transiiton

transition: 0.635s;
-o-transition: 0.635s;
-moz-transition: 0.635s;
-webkit-transition: 0.635s;

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Só uma correção. O efeito que eu quero é na transparencia (opacity). Mas só funcionou nos links.

 

Edit:

 

Bem... chegamos em algum lugar...

.theblogmenu {
position:relative;
left:16%;
width:63%;
}

.theblogmenu ul {
    list-style:none;
    margin:0;
    padding:0;
}

.theblogmenu ul:before,.theblogmenu ul:after {
    content:"";
    display:table;
}
.theblogmenu ul:after {
    clear:both;
}
.theblogmenu ul > li {
    float:left;
    position:relative;
}
.theblogmenu a {
    display:block;
    padding:10px 20px;
    line-height:1.2em;
    text-decoration:none;
font-weight:bold;
color:     #ffbc69;

font-size:233%;
}
.theblogmenu a:hover {
    text-decoration:none;
    background:#595959;

}
.theblogmenu li ul {
    background:transparent;
  position:absolute;
    left:0;
    top:64px;
    z-index:1;
transition:0.635s;

}
.theblogmenu li ul li {
    width:auto;
 overflow:hidden;
    height:0;
 
}

.theblogmenu ul > li ul:hover {
  background:rgba(130,130,130,0.86);
transition:ease;
}

.theblogmenu li ul a {
    border:none;


}
.theblogmenu li ul li a:hover {
    background:rgba(255,181,197,0.2);

}


.theblogmenu ul > li:hover ul li {
transition:ease;
   height:auto;
font-size:63%;

}

Edit2:

Temos um resultado satisfatório!

 

https://pastebin.com/uWzpiGB1

 

Eu só não consegui fazer o fade-out.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Redes de Computadores - Gabriel Torres

PROMOÇÃO DE QUARENTENA

De R$ 39,90 por apenas R$ 9,90 só até as 23h59min desta sexta-feira 03/04/2020

CLIQUE AQUI E COMPRE AGORA MESMO!