[SOLUCIONADO] pseudoelemento :checked

javicruzgv · #1 (**permalink**) 29/01/2015, 03:24

Buenas, he estado mirando por algunas webs y me he lanzado a hacer una web con el menu por este método y me esta dando problemas. alguien puede darme alguna razón o la solución?

Código HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="estilo.css" rel="stylesheet">
<link href="estiloResponsive.css"rel="stylesheet">
<title>Prueba Flex</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script language="JavaScript"> 
<!-- 
	//si es el explorer viejo redireccionar a debe seleccionar otro navegador
	if(navigator.userAgent.indexOf('MSIE')!=-1){
		alert('Su navegador esta Obsoleto');
	}
  
//-->

	//deseleccionar el radio boton cuando le des a apagar
	$(document).ready(function(){
 
		$('#btnOn').click(function(){
			$('input:radio[name=menu1]').attr('checked', false);
		});
	});
</script> 
<body>
	<div id="contenedorPagina" class="contenedorFlexible">
        <div id="contenedorMenu">
            <div id="contenedorBtn" class="contenedorFlexible">
                <!--Boton inicio-->
                <input id="on" class="oculto" type="checkbox"></select>
                <label for="on" class="" id="btnOn"><img src="img/inicio.png"></label>
                <!--Boton empresa-->
                <input id="empresa" type="radio" name="menu1" class="oculto" >
                <label for="empresa" class="btnMenu1" id="btnEmpresa"><img src="img/info.png"></label>
                <!--Boton trabajos-->
                <input id="trabajos" type="radio" name="menu1" class="oculto">
                <label for="trabajos" class="btnMenu1" id="btnTrabajos"><img src="img/trabajos.png"></label>
                <!--Boton contacto-->
                <input id="contacto" type="radio" name="menu1" class="oculto">
                <label for="contacto" class="btnMenu1" id="btnContacto"><img src="img/contacto.png"></label>
            </div>
        </div>
        <div id="contenedorContenido">
            <div id="contenido">
                <div id="cont1" >Empresa</div>
                <div id="cont2" >Productos</div>
                <div id="cont3" >Contactos</div>
            </div>
        </div>
    </div>
    <div id="contenedorPie"></div>
</body>
</html>

CSS

Código:

@charset "utf-8";
/* CSS Document */

*{
	margin:0;
	padding:0;	
}

body{
	
}

/*clases generales*/
.oculto{
	display:none;	
}

.contenedorFlexible{
	display:flex;
	display:-webkit-flex;
	display:-ms-flex;
}
/*clases generales*/

/*contenedores*/
#contenedorPagina{
	flex-direction:row;
	width:100%;
	min-height:100%;
}

#contenedorMenu{
	width:15%;
	max-width:140px;
}

#contenedorContenido{
	width:85%;
	margin:0 auto;
	//border-left:1px dashed #999;
	box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
	padding:1em;
}

#contenedorPie{
	
}
/*contenedores*/

/*menu principal*/
#contenedorBtn{
	flex-direction:column;
	width:70%;
	margin:15%;	
	overflow:hidden;
}

#contenedorBtn label{
	display:inherit;
	width:100%;	
	overflow:hidden;
	margin:0 0 2em 0;
}

#contenedorBtn label img{
	width:100%;	
	height:100%;
	border-radius:100%;
	overflow:hidden;
}

.btnMenu1{
	display:inherit;
	opacity:0;
}

.btnMenu1 img{
	background-color:#00E3FF;	
}

#btnOn img{
	background-color:#666;
}

#on:checked ~ #btnOn img{
	background-color:#72F982;
	transition:all 0.2s;
    -moz-transition:all 0.2s;
    -webkit-transition:all 0.2s;
	-o-transition:all 0.2s;	
}

#on:checked ~ .btnMenu1{
	opacity:1;
	transition:all 0.2s;
    -moz-transition:all 0.2s;
    -webkit-transition:all 0.2s;
	-o-transition:all 0.2s;
}
/*menu principal

/*contenedor contenido*/
#contenido{
	position:relative;
	float:left;	
	width:100%;
}

#cont1, #cont2, #cont3{
	position:relative;
	float:left;
	width:100%;
	opacity:0;
	background-color:#00A3FF;
}

#empresa:checked ~ #cont1{
	opacity:1;
	transition:all 0.2s;
    -moz-transition:all 0.2s;
    -webkit-transition:all 0.2s;
	-o-transition:all 0.2s;
}

#trabajos:checked ~ #cont2{
	opacity:1;
	transition:all 0.2s;
    -moz-transition:all 0.2s;
    -webkit-transition:all 0.2s;
	-o-transition:all 0.2s;
}

#contacto:checked ~ #cont3{
	opacity:1;
	transition:all 0.2s;
    -moz-transition:all 0.2s;
    -webkit-transition:all 0.2s;
	-o-transition:all 0.2s;
}

alzacon · #2 (**permalink**) 29/01/2015, 06:41

El problema es que no estás usando ese método como lo usan, lo estas intentando adaptar a tu html y asi no funciona nunca. El porqué es http://www.w3.org/community/webed/wi...ermano_general

javicruzgv · #3 (**permalink**) 29/01/2015, 09:49

Gracias Alzacon, pensaba que el símbolo servia para relacionar un campo con otro, no sabia que dependía de la situación del campo.