Boa tarde a todos , acredito que seja um problema simples porém não estou conseguindo visualizar . A situação é que já na primeira aula não estou conseguindo aplicar o disable no label que representa bebida ou bolos , simplesmente não tenho retorno nenhum .
Segue o código da minha index : Estou colocando o head fora por que ele não aparece na formatacao :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="estilo.css">
<title>Só de cenoura</title>
</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>
<div class="container-menus">
<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>Segue abaixo agora o meu estilo.css
#opcao-bolos:checked ~ #menu-bebidas,
#opcao-bebidas:checked ~ #menu-bolos
{
display:none;
}
.menu {
width: 100%;
}
body{
background: #3D1A11;
margin:0;
font-family: sans-serif;
text-align:center;
}
input[type=radio]{
display: none;
}
label{
background-color:#563429;
background-repeat:no-repeat;
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:0px;
z-index:1;
}
label [for=opcao-bolos]{
left:0;
}
label [for=opcao-bebidas]{
right:0;
}Agradeço a qualquer ajuda , estou usando o Chrome versão 48.0.2
