Cambiar el CSS del elemento secundario cuando el elemento primario está suspendido

159

En primer lugar, supongo que esto es demasiado complejo para CSS3, pero si hay una solución en algún lugar, me encantaría ir con eso.

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 hijo está configurado para mostrar: ninguno; por defecto, pero luego cambia para mostrar: bloque; cuando el mouse se encuentra sobre el div padre. El problema es que este marcado aparece en varios lugares en mi sitio, y solo quiero que el niño se muestre si el mouse está sobre su padre, y no si el mouse está sobre cualquiera de los otros padres (todos tienen la misma clase nombre y sin ID).

He intentado usar $(this)y fue .children()en vano.

$('.parent').hover(function(){
            $(this).children('.child').css("display","block");
        }, function() {
            $(this).children('.child').css("display","none");
        });
jquery css jquery-selectors parent Hartley Brody
fuente

Respuestas:

260

¿Por qué no solo 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 admite: desplace correctamente:

jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});

Aquí hay un ejemplo rápido: Fiddle

Stephen
fuente
ese código no me funciona. ¿se supone que debe decir ".parent.hover" y no ".parent: hover"? caso, nunca he visto lo que tienes antes. ¿y una coma no indica múltiples selectores que toman los mismos estilos? No veo cómo eso ayuda aquí. un poco más de información sobre ese CSS, por favor 0 =]
Hartley Brody
66
:hoveres una de las "pseudo-clases dinámicas" definidas por CSS2 ( aquí está la especificación ). Aquí hay un ejemplo rápido: http://jsfiddle.net/5FLr4/ . esto funciona para mi.
Lee
ahh muchas gracias! De hecho, tuve un posicionamiento relativo que estaba haciendo que el texto secundario fuera de la vista ... ¡sí! >. <agradezco la ayuda!
Hartley Brody
Aparentemente, esto no funcionará para .child :: - webkit-scrollbar-thumb si desea cambiar el resaltado de la barra de desplazamiento dentro del elemento secundario.
Thdoan
1
.parent:not(:hover) .child { display: none; }parece funcionar bien para mí, aunque ciertamente no estoy preocupado por IE6. Pero de esta manera puedo usarlo en elementos que no quiero tener una displaypropiedad uniforme .
Blair Connolly
147

No es necesario usar JavaScript o jquery, CSS es suficiente:

.child{ display:none; }
.parent:hover .child{ display:block; }

VER DEMO

Ali Adravi
fuente
9

Uso toggleClass().

$('.parent').hover(function(){
$(this).find('.child').toggleClass('color')
});

donde coloresta la clase Puede diseñar la clase como desee para lograr el comportamiento que desea. El ejemplo muestra cómo se agrega y elimina la clase al entrar y salir del mouse.

Verifique el ejemplo de trabajo aquí .

Hussein
fuente
7 
.parent:hover > .child {
    /*do anything with this child*/
}
Amir Rahman
fuente
3

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 .

Roger Roelofs
fuente
3

Tengo lo que creo que es una mejor solución, ya que es escalable a más niveles, tantos como desee, no solo dos o tres.

Uso bordes, pero también se puede hacer con cualquier estilo deseado, como el color de fondo.

Con el borde, la idea es:

  • Tenga un color de borde diferente solo un div, el div sobre donde está el mouse, no en ningún padre, ni en ningún hijo, por lo que solo se puede ver ese 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>
z666zz666z
fuente
Esto no hace lo que hizo la pregunta. Cambia el borde alrededor del elemento sobre el que se cierne. No es el borde alrededor de un elemento hijo.
jenniwren
2

Si está utilizando el estilo Bootstrap de Twitter y JS base para un menú desplegable:

.child{ display:none; }
.parent:hover .child{ display:block; }

Esta es la pieza que falta para crear menús desplegables (que no son molestos)

  • El comportamiento es:
    1. Manténgase abierto al hacer clic, cierre al hacer clic nuevamente en cualquier otro lugar de la página
    2. Cierre automáticamente cuando el mouse se desplace fuera de los elementos del menú.
R Tobin
fuente
2

No estoy seguro de si hay terribles razones 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 muchos elementos en la página.

*:not(:hover)>.parent-hover-show{
    display:none;
}

Pero de esta manera, todo lo que necesita es aplicar parent-hover-showa un elemento y el resto se ocupa, y puede mantener el tipo de visualización predeterminado que desee sin que siempre sea "bloque" o hacer múltiples clases para cada tipo.

Brian Leishman
fuente
0

Para cambiarlo de CSS, ni siquiera necesita establecer la clase secundaria

.parent > div:nth-child(1) { display:none; }
.parent:hover > div:nth-child(1) { display: block; }
hamboy75
fuente