Cómo aplicar el elemento secundario: pase el mouse pero no el elemento primario: pase el mouse

Question

Con el siguiente html, cuando estoy sobre el elemento secundario, aparece un fondo verde en el elemento primario. ¿Cómo puedo evitar que eso suceda? Sí quiero el fondo verde si estoy flotando fuera del elemento secundario.

CSS3 está bien.

<style> 
     .parent { padding: 100px; width: 400px; height:400px; } 
     .parent:hover { background-color: green; } 
     .child { padding: 100px; width: 200px; height:200px; } 
     .child:hover { background-color: blue; } 
</style> 
<div class="parent"> 
     <div class="child">Child</div> 
</div> 

Answer 1

Así que esto es REALMENTE feo, pero funciona (tipo de). Básicamente estoy creando un duplicado de padre como un hermano de niño. parent-overwrite está oculto por defecto, luego se muestra en el vuelo estacionario del niño. A Chrome no le gusta, a menos que use el selector + en lugar del selector ~. Esto no es muy escalable, pero puede funcionar.

Como los otros chicos publicaron, javascript probablemente sería una mejor solución.

<style> 
    .parent { padding: 100px; width: 400px; height:400px; position: relative; z-index: 998; } 
    .parent:hover { background-color: green; } 
    .child { padding: 100px; width: 200px; height:200px; position: relative; z-index: 1000; } 
    .child:hover { background-color: blue; } 
    .parent-overwrite { padding: inherit; width: inherit; height: inherit; position: absolute; top: 0; left: 0; z-index: 999; background-color: #FFF; display: none; } 
    .child:hover ~ .parent-overwrite { display: block; } 
</style> 

<div class="parent"> 
    <div class="child">Child</div> 
    <div class="parent-overwrite"></div> 
</div> 

Answer 2

Lo más fácil de hacer puede ser utilizar JS para este tipo de CSS. Tal vez puedas intentar reconsiderar tu implementación. ¿Por qué estás tratando de hacer algo como esto?

Answer 3

Esto no es posible con CSS plano simple. Está solicitando una pseudoclase de un hijo (child:hover) para afectar la declaración background de un padre. No hay forma de especificar ese tipo de cosas usando CSS regulares.

Esto definitivamente se puede hacer usando javascript.

Answer 4

Solo puedo hacer esto agregando marcas adicionales. Se debe agregar un div vacío que esencialmente funciona como el fondo principal. Eche un vistazo al CSS aquí.

Parte HTML:

<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> 

parte CSS:

article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } 

    .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; } 

http://jsbin.com/ubiyo3/edit

Answer 5

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

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

Con la frontera, la idea es:

• tienen un color de borde diferente sólo un div, el div sobre donde está el ratón, no en cualquier padre, no en cualquier niño, por lo que puede ser visto solo 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>