Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Aula 1- Vídeo 05 - Problema com radio buttons [2]

Referente ao curso Cordova & PhoneGap: Apps mobile com HTML, CSS e JS

por Weslly
| 93.3k xp | 13 posts

Olá, bom dia!

Só encontrei um tópico (https://cursos.alura.com.br/forum/topico-aula-01-para-aula-02-problema-com-radio-buttons-20358) com problemas usando buttons e apesar de simples, gostaria de entender o que está errado.

No meu Projeto os radio buttons não funcionam como esperado. Se eu seleciono " Bolos", a imagem bebidas continua sendo exibida e o inverso também. Ou seja, seleciono "Bebidas" e não ocorre nenhuma transição. Não sei se fui claro o bastante. Mas, o esperado seria como o Professor Sérgio demonstra no instante 11:30 do vídeo 05 da Aula 1.

Meu index.html

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF‐8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Só de Cenoura</title>
    <link rel="stylesheet" href="estilo.css">
</head>
<body>
    <input type="radio" name="opcao" id="opcao‐bolos" checked>
    <label for="opcao‐bolos">Bolos</label>

    <input type="radio" name="opcao" id="opcao‐bebidas">
    <label for="opcao‐bebidas">Bebidas</label>

    <img src="imagens/menu-bolos.png" alt="Menu Bolos" 
        id="menu‐bolos" class="menu">

    <img src="imagens/menu-bebidas.png" alt="Menu Bebidas" 
        id="menu‐bebidas" class="menu">

</body>
</html>

Meu estilo.css

#opcao-bolos: checked ~ #menu-bebidas,
#opcao-bebidas: checked ~ #menu-bolos {

    display: none;
}

.menu {
width: 100%;
}
6 respostas
por Natan Souza
| 2115.9k xp | 3725 posts
Instrutor Product Design Lead

Ola tudo certo?

Tenta tirar o espaço ali no seletor com o checked e me fala se funciona?

Sempre na utilizacao de pseudoclasses e pseudoelementos devemos deixar sempre junto com o elemento. Pois o espaço ali indicaria uma herança.

Abcs!

por Weslly
| 93.3k xp | 13 posts

Olá Natan,

Muito obrigado pelo seu retorno!

Alterei o arquivo css e o problema ainda persiste.

Por gentileza, avalie se alterei corretamente.

#opcao-bolos:checked ~ #menu-bebidas,
#opcao-bebidas:checked ~ #menu-bolos{
    display:none;
}

.menu{
width: 100%;
}
por Natan Souza
| 2115.9k xp | 3725 posts
Instrutor Product Design Lead

Oi Weslly,

Voce poderia colocar seu codigo todo em um Jsbin?

Vamos tentar ver se tem alguma diferenca do codigo final do projeto, pois agora nao ha nenhum problema no CSS.

Abcs!

por Weslly
| 93.3k xp | 13 posts

Olá Natan,

Nunca usei e não também não faço muito ideia do que exatamente é esse "Jsbin". Mas, agradeço ajuda e vamos lá...

Não sei se fiz certo. Colei o código dos meus arquivos .html e .css. Segue o link: http://jsbin.com/zasekel/edit?html,css,output

solução!
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Fala Weslly, tudo bom?

Cara eu fiz alguns testes aqui, para conseguir selecionar o elemento img e fazer o jogo com o display você precisaria passar o seletor divantes da imagem que você quer ocultar ou fazer aparecer.

O CSS nesse caso fica assim: 

  #opcao-bolos:checked ~ div #menu-bebidas {
    display: none;
  }
  #opcao-bebidas:checked ~ div #menu-bolos {
    display: none;
  }

E uma versão com tudo junto:

<body>

  <input type="radio" name="opcao" id="opcao-bolos" checked> <!--Fazer um input vir como checked-->
  <label for="opcao-bolos">Bolos</label>

  <input type="radio" name="opcao" id="opcao-bebidas">
  <label for="opcao-bebidas">Bebidas</label>

  <div class="container-menus"> <!-- Criar um container, para o seletor-->
    <img src="imagens/menu-bolos.png" alt="Nossos bolos" id="menu-bolos" class="menu">
    <img src="imagens/menu-bebidas.png" alt="As Bebidas" id="menu-bebidas" class="menu">
  </div>

  <style>
  #opcao-bolos:checked ~ div #menu-bebidas {
    display: none;
  }
  #opcao-bebidas:checked ~ div #menu-bolos {
    display: none;
  }
  </style>
</body>
por Weslly
| 93.3k xp | 13 posts

Olá Mario, boa noite! Muito obrigado pelo seu post! Fiz os ajustes sugerido e o único problema é que não exibia a tela de Bebidas. Mas, mantive aquele trecho do CSS da maneira que tava e deu tudo certo.

Vou deixar o código abaixo para melhor entendimento. index.html

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="stylesheet" type="text/css" href="estilo.css">
     <title>Só de Cenoura</title>

</head>

<body>

  <input type="radio" name="opcao" id="opcao-bolos" checked> <!--Fazer um input vir como checked-->
  <label for="opcao-bolos">Bolos</label>

  <input type="radio" name="opcao" id="opcao-bebidas">
  <label for="opcao-bebidas">Bebidas</label>

  <div class="container-menus"> <!-- Criar um container, para o seletor-->
    <img src="imagens/menu-bolos.png" alt="Nossos bolos" id="menu-bolos" class="menu">
    <img src="imagens/menu-bebidas.png" alt="As Bebidas" id="menu-bebidas" class="menu">
  </div>

</body>

</html>

estilo.css


#opcao-bolos:checked ~ #menu-bebidas,
#opcao-bebidas:checked ~ #menu-bolos{
    display:none;
}

.menu{
width:100%;
}

body{
    background:#3d1a11;
    font-family:sans-serif;
    margin: 0;
    text-align:center;
}

input[type=radio]{ 
    display:none;
}

label{
    background-color:#563429;
    background-size:4em;
    background-position:center-top;
    color:white;
    display:block;
    font-size:75%;
    padding:4em 0 1em;
    text-transform:uppercase;
}

label[for=opcao-bolos]{
    background-image:url(imagens/icone-bolos.svg);
}
label[for=opcao-bebidas]{
    background-image:url(imagens/icone-bebidas.svg);
}

input[type=radio]:checked + label{
    background-color: #E4876D;
}

label{
    width: 50%;
    position: fixed;
    bottom: 0;
    z-index: 1;
}

label[for=opcao-bolos]{
    left: 0;
}

label[for=opcao-bebidas]{
    right: 0;
}

html,
body{
    overflow-x: hidden;
    width: 100%;
}
.container-menus{
    transform: translateX(0);
    transition: transform 300ms ease;
    width: 200%;
}

.container-menus .menu{
    float: left;
    width: 50%;
}

#opcao-bebidas:checked ~.container-menus{
    transform: translateX(-50%);
}

/* hack android velho */
body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix {
  from { padding: 0; }
  to { padding: 0; }
}