estilos - modificar clase css jquery
Cambiar el CSS del elemento secundario cuando el padre está suspendido (9)
En primer lugar, supongo que esto es demasiado complejo para CSS3, pero si hay una solución en alguna parte, me gustaría ir con eso en su lugar.
El HTML es bastante sencillo.
<div class="parent">
<div class="child">
Text Block 1
</div>
</div>
<div class="parent">
<div class="child">
Text Block 2
</div>
</div>
El div infantil está configurado para mostrar: ninguno; por defecto, pero luego cambia para mostrar: bloquear; cuando el mouse está sobre el div principal El problema es que este marcado aparece en varios lugares de mi sitio, y solo quiero que se muestre el elemento secundario si el mouse está sobre el elemento primario y no si el mouse está sobre alguno de los otros elementos principales (todos tienen la misma clase) nombre y sin ID).
Intenté usar $(this) y .children() inútilmente.
$(''.parent'').hover(function(){
$(this).children(''.child'').css("display","block");
}, function() {
$(this).children(''.child'').css("display","none");
});
¿Por qué no usar CSS?
.parent:hover .child, .parent.hover .child { display: block; }
y luego agregue JS para IE6 (dentro de un comentario condicional por ejemplo) que no es compatible: desplace el cursor correctamente:
jQuery(''.parent'').hover(function () {
jQuery(this).addClass(''hover'');
}, function () {
jQuery(this).removeClass(''hover'');
});
Aquí hay un ejemplo rápido: Fiddle
No es necesario usar JavaScript o jquery, CSS es suficiente:
.child{ display:none; }
.parent:hover .child{ display:block; }
No estoy seguro si hay razones terribles para hacer esto o no, pero parece funcionar conmigo en la última versión de Chrome / Firefox sin ningún problema de rendimiento visible con bastantes elementos en la página.
*:not(:hover)>.parent-hover-show{
display:none;
}
Pero de esta forma, todo lo que necesita es aplicar parent-hover-show a un elemento y se ocupa el resto, y puede conservar el tipo de visualización predeterminado que desee sin que sea siempre "bloqueado" o hacer múltiples clases para cada tipo .
Para cambiarlo de CSS, ni siquiera necesitas configurar la clase de niño
.parent > div:nth-child(1) { display:none; }
.parent:hover > div:nth-child(1) { display: block; }
Si está utilizando Twitter Bootstrap styling y base JS para un menú desplegable:
.child{ display:none; }
.parent:hover .child{ display:block; }
Esta es la pieza que falta para crear ventanas adhesivas desplegables (que no son molestas)
- El comportamiento es:
- Permanezca abierto cuando hace clic, cierre cuando vuelva a hacer clic en cualquier otro lugar de la página
- Ciérrela automáticamente cuando el mouse se desplaza fuera de los elementos del menú.
Tengo lo que creo que es una mejor solución, ya que es escalable a más niveles, tantos como se desee, no solo dos o tres.
Utilizo bordes, pero también se puede hacer con el estilo que se quiera, como el color de fondo.
Con el borde, la idea es:
- Tener un color de borde diferente solo un div, el div encima del lugar donde se encuentra el mouse, no en ningún elemento principal, ni en ningún elemento secundario, por lo que solo se puede ver dicho borde div en un color diferente mientras que el resto permanece en blanco.
Puede probarlo en: http://jsbin.com/ubiyo3/13
Y aquí está el código:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hierarchie Borders MarkUp</title>
<style>
.parent { display: block; position: relative; z-index: 0;
height: auto; width: auto; padding: 25px;
}
.parent-bg { display: block; height: 100%; width: 100%;
position: absolute; top: 0px; left: 0px;
border: 1px solid white; z-index: 0;
}
.parent-bg:hover { border: 1px solid red; }
.child { display: block; position: relative; z-index: 1;
height: auto; width: auto; padding: 25px;
}
.child-bg { display: block; height: 100%; width: 100%;
position: absolute; top: 0px; left: 0px;
border: 1px solid white; z-index: 0;
}
.child-bg:hover { border: 1px solid red; }
.grandson { display: block; position: relative; z-index: 2;
height: auto; width: auto; padding: 25px;
}
.grandson-bg { display: block; height: 100%; width: 100%;
position: absolute; top: 0px; left: 0px;
border: 1px solid white; z-index: 0;
}
.grandson-bg:hover { border: 1px solid red; }
</style>
</head>
<body>
<div class="parent">
Parent
<div class="child">
Child
<div class="grandson">
Grandson
<div class="grandson-bg"></div>
</div>
<div class="child-bg"></div>
</div>
<div class="parent-bg"></div>
</div>
</body>
</html>
Use toggleClass() .
$(''.parent'').hover(function(){
$(this).find(''.child'').toggleClass(''color'')
});
donde el color es la clase Puede diseñar la clase como desee para lograr el comportamiento que desea. El ejemplo demuestra cómo se agrega y quita la clase al entrar y salir del mouse.
Ver ejemplo de trabajo here .
La respuesta de Stephen es correcta, pero aquí está mi adaptación de su respuesta:
HTML
<div class="parent">
<p> parent 1 </p>
<div class="child">
Text Block 1
</div>
</div>
<div class="parent">
<p> parent 2 </p>
<div class="child">
Text Block 2
</div>
</div>
CSS
.parent { width: 100px; min-height: 100px; color: red; }
.child { width: 50px; min-height: 20px; color: blue; display: none; }
.parent:hover .child, .parent.hover .child { display: block; }
jQuery
//this is only necessary for IE and should be in a conditional comment
jQuery(''.parent'').hover(function () {
jQuery(this).addClass(''hover'');
}, function () {
jQuery(this).removeClass(''hover'');
});
Puede ver este ejemplo trabajando en jsFiddle .
.parent:hover > .child {
/*do anything with this child*/
}