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!
