Skip to main content
snippet adicionado para melhor entendimento do que está acontecendo
Fonte Link

Meu código .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;}`

Meu código .html

.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>

<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>

 

Meu código .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;}`

Meu código .html


<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>

.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>
 

Fonte Link

css funcionando diferente - dentro da tag ou em arquivo separado .css

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

Meu código .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;}`

Meu código .html


<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.