0

Montei um arquivo básico com um menu simples. simplifiquei-o ao máximo para tentar encontrar o problema e não consigo.

O problema é que, ao entrar no site, a animação especificada na transition do css começa a funcionar automaticamente, ampliando os botões e alterando suas cores, mas apenas quando importo o arquivo .css Se eu uso a tag para inserir o css, a animação não funciona a menos que o cursor sobreponha o botão.

Abaixo com todo o conteúdo junto, funcionando como eu preciso, apenas com o :hover

<html>
<head>
<style type="text/css">
.escolha{background-color: #999; color: #fff;}
.escolha ul { list-style: none; margin-left: -40px;}
.escolha ul li {background-color: #999; padding: 10px 0; cursor: pointer;  transition: all 0.5s ease 0s;}
.escolha ul li estado{width: 50%; padding: 10px; transition: all 0.5s ease 0s;}
.escolha ul li cidade{width: 50%; padding: 10px; transition: all 0.5s ease 0s;}
.escolha ul li:hover {background-color: #6ab4c6; transition: all 0.5s ease 0s;}
.escolha ul li:hover estado{background-color: #0088a4;}
.escolha ul li:hover cidade{padding: 10px 10px 10px 20px;}`
</style>

</head>

<body>
<div class="escolha">
    <ul>
        <li><estado>SP</estado><cidade>São Paulo</cidade></li>
        <li><estado>SP</estado><cidade>São Caetano</cidade></li>
        <li><estado>PR</estado><cidade>Curitiba</cidade></li>
    </ul>
</div>

</body>
</html>

Abaixo com os arquivos separados, importando o .css, onde a animação acontece

.escolha{background-color: #999; color: #fff;}
.escolha ul { list-style: none; margin-left: -40px;}
.escolha ul li {background-color: #999; padding: 10px 0; cursor: pointer;  transition: all 0.5s ease 0s;}
.escolha ul li estado{width: 50%; padding: 10px; transition: all 0.5s ease 0s;}
.escolha ul li cidade{width: 50%; padding: 10px; transition: all 0.5s ease 0s;}
.escolha ul li:hover {background-color: #6ab4c6; transition: all 0.5s ease 0s;}
.escolha ul li:hover estado{background-color: #0088a4;}
.escolha ul li:hover cidade{padding: 10px 10px 10px 20px;}
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/stylepaginas.css" media="screen, handheld" />

</head>

<body>
<div class="escolha">
    <ul>
        <li><estado>SP</estado><cidade>São Paulo</cidade></li>
        <li><estado>SP</estado><cidade>São Caetano</cidade></li>
        <li><estado>PR</estado><cidade>Curitiba</cidade></li>
    </ul>
</div>

</body>
</html>

Tentei utilizar o jsfiddle para testar mas o erro não acontece, apenas no localhost e na versão online.

Se alguém tiver uma solução, eu agradecerei muito.

11
  • Cara da forma como vc explicou não deu para entender o problema... testando sei código aqui quando a pagina carrega nada acontece, mas quando coloca o mouse a animação funciona normalmente... qual é o problema de fato?
    – hugocsl
    Commented 13/05/2019 às 15:14
  • O problema é que, na versão que importa o css, os botões simplesmente se animam sozinhos, sem ocorrer o hover. É como se eles não tivessem qualquer especificação e, após importar o css, eles crescem e adquirem as cores corretas. Consegui me explicar??? Commented 13/05/2019 às 15:16
  • testei dos dois modos aqui e o funcionamento foi o mesmo, ou seja, as animações só funcionam no hover, como deve ser.
    – Sam
    Commented 13/05/2019 às 15:34
  • @VaralStudio e qual é o modo correto que deveria ser o funcionamento? Explica melhor...
    – user148754
    Commented 13/05/2019 às 15:40
  • Deveria funcionar apenas com o hover. Quando uso o import funciona mais ou menos assim: Os botões aparecem sem qualquer formatação, apenas texto em preto e sem fundo e simplesmente crescem até ficarem nos formatos finais, com fundo cinza e texto em branco. Esse "crescer" que não era para acontecer. Não sei se posso colocar link para o site onde fiz o teste... Commented 13/05/2019 às 16:24

1 Resposta 1

0

Pode parece doidera, mas não sei porque só consegui resolver o "bug" colocando o link do CSS dentro do <body>. E Sim é permitido colocar o CSS dentro do Body como vc pode ver aqui É uma boa prática inserir as tags do CSS no final do corpo do Body?

Veja o código do Gif e quando eu dou o refresh etc. No Chrome resolveu, e no FireFox parece não acontecer o problema.

Em suma seu HTML tem que ficar dessa forma para evitar o Bug

.....
</head>

<body>

<link rel="stylesheet" type="text/css" href="css/stylepaginas.css" media="screen, handheld" />

<div class="escolha">
    <ul>
        <li><estado>SP</estado><cidade>São Paulo</cidade></li>
        <li><estado>SP</estado><cidade>São Caetano</cidade></li>
        <li><estado>PR</estado><cidade>Curitiba</cidade></li>
    </ul>
</div>

</body>
.....

5
  • Doideira mesmo. O problema desaparece. Nesse caso é uma solução que vou utilizar, mas fico pensando se, com uma programação mais complexa, seria viável. Valeu, hugocsl.... Commented 14/05/2019 às 17:19
  • @VaralStudio eu não conseguiu outra solução que resolvesse o problema... E estranhamente em um projeto maior pode ser que não ocorra isso, pois parece não haver motivo certo para o ocorrido.... Não que eu tenha identificado. Se vc acha que resolveu o problema lembre-se de marcar esse ícone ´✔´ abaixo das setinhas ao lado da minha resposta. Vc pode remove-lo depois caso apareça outra resposta que vc julgue mais completa
    – hugocsl
    Commented 14/05/2019 às 17:47
  • 1
    Obrigado. Não sabia sobre o ´✔´ . Commented 15/05/2019 às 18:22
  • @VaralStudio eh uma forma de manter o site organizado, e mesmo com uma resposta aceita outra pessoa pode responder tbm, uma coisa não impede a outra. Mas assim a pergunta não fica em ordem via com sem resposta aceita mesmo na tendo sido resolvido. Vlw a força
    – hugocsl
    Commented 15/05/2019 às 18:46
  • 1
    Eu quem agradeço. Sempre usei o site mas buscando pelas perguntas e respostas de outros. Nunca tinha acontecido de precisar perguntar diretamente, por isso não tinha percebido o funcionamento completo do site. Commented 16/05/2019 às 19:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .