[SOLUCIONADO] Ocultar una capa y mostrar otras.-.

[Zeromm]

Muy buenas!! tengo una duda con javascript, ya que no tengo ni pajolera idea de ese lenguaje

A ver, tengo dos grupos, en el primer grupo estarán "A, B, C y D", que siempre tienen que estar visibles, ya que van a ser los que "provoquen" que los elementos del segundo grupo aparezcan y desaparezcan.

En el segundo grupo estarán "AA, BB, CC y DD". De estos la capa "AA" es la unica capa que al entrar tiene que estar visible.

Entonces lo que quiero es que al pasar el ratón por "B" que sería del primer grupo, la capa "BB" del segundo grupo apareciese y desapareciera la que está activa. Al pasar el ratón por C se activara la "CC"... Al pasar el ratón por D se activara la "DD"... y que cuando el ratón no esté sobre ninguno de esos elementos se active automaticamente la capa "AA".

Como se que me explico bastante mal, dejo un código de ejemplo. Y a mayores un codepen donde muestro lo que casi tengo :

Código HTML:

<ul>		
  <li class='selector' id="primero">mostrar el segundo div oculto</li>
		<li class='selector' id="segundo">mostrar el segundo div oculto</li>
  <li class='selector' id="tercero">mostrar el tercer div oculto</li>
  <li class='selector' id="cuarto">mostrar el cuarto div oculto</li>
	</ul>
	
	<div class="primero">Contenido del primer div<br>mas contenido</div>
	<div class="segundo">Contenido del segundo div</div>
<div class="tercero">tercer contenido</div> 
<div class="cuarto">cuarto contenido</div> 

Código:

$(document).ready(function(){			
			$(".selector").hover(function(){				
				var id=$(this).attr("id");				
				$("."+id).show();
			},function(){
				var id=$(this).attr("id");
				$("."+id).hide();
			})

Código:

.primero,.segundo, .tercero, .cuarto {
		display:none;
		padding:5px;
		border:1px solid #ccc;
		background-color:#f1f1f1;
		width:200px;
  	position: absolute;
    transicion: all 2s;
	}

.primero{display: block;background: crimson;}

a ver si alguien sabe como solucionarlo!

[Alexis88]

En la línea en la que ocultas al <div> luego de retirar el cursor del mouse de él, aplica una función que se ejecutará cuando se complete dicho proceso, es decir, el ocultamiento del elemento.

Código Javascript:

$("."+id).hide("fast", function(){
    if (!$("div:visible").length)
        $(".primero").show();
});
 

Cuando retires el cursor del <div> y éste se oculte, verificas si hay más elementos <div> visibles. De no haberlos, muestras al primero.

Saludos

[Zeromm]

Hola Alexis88, gracias por contestar :)

He puesto el código que me pusiste en la parte inferior pero sigue sin funcionar... :(

http://codepen.io/zeromm/pen/qkogL

[Alexis88]

Eso pasa por no leer bien lo que uno escribe.

Te dije que hagas eso en la línea en donde ocultas al <div>, o sea, así:

Código Javascript:

$(".selector").hover(function(){                
    var id=$(this).attr("id");              
    $("."+id).show();
},function(){
    var id=$(this).attr("id");
    $("."+id).hide("fast", function(){
        if (!$("div:visible").length)
            $(".primero").show();
    });
});
 

Saludos

[Zeromm]

el problema es que cuando leo algo de javascript mi cerebro se desconecta y ya no entiende ni el español

Pero si, ahooooora si!! MUCHAS GRACIAS!! ;)