Wie Kind anwenden: schwebt aber nicht parent:

Question

Mit dem folgende HTML schweben, wenn ich über Kind schweben, erhalte ich einen grünen Hintergrund auf den Eltern. Wie kann ich das verhindern? Ich möchte den grünen Hintergrund, wenn ich außerhalb des Kindelements schwebe.

CSS3 ist in Ordnung.

<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

Also das ist wirklich hässlich, aber es funktioniert (Art). Ich erstelle im Grunde ein Duplikat des Elternteils als Geschwisterkind. Parent-Overwrite ist standardmäßig ausgeblendet und wird dann im Hover von Child angezeigt. Chrome gefällt nicht, es sei denn, Sie verwenden den + -Selektor anstelle des ~ Selektors. Dies ist nicht sehr skalierbar, aber es kann funktionieren.

Wie die anderen Jungs geschrieben, würde Javascript wahrscheinlich eine bessere Lösung.

<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

Die einfachste Sache zu tun, kann sein, JS für diese Art von CSS zu verwenden. Vielleicht können Sie versuchen, Ihre Implementierung zu überdenken. Warum versuchst du so etwas zu tun?

Answer 3

Dies ist mit Plain-Vanilla-CSS nicht möglich. Sie fragen nach einer Pseudoklasse eines Kindes (child:hover), um die background Deklaration eines Elternteils zu beeinflussen. Es gibt keine Möglichkeit, solche Dinge mit regulären CSS zu spezifizieren.

Dies kann definitiv mit Javascript durchgeführt werden.

Answer 4

Ich kann nur dies mit zusätzlichen Markup hinzufügen. Ein leeres Div muss hinzugefügt werden, das im Wesentlichen als übergeordneter Hintergrund fungiert. Schauen Sie sich hier das CSS an.

HTML Teil:

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

CSS Teil:

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

Ich habe, was ich denke, eine bessere Lösung ist, da es auf mehreren Ebenen skalierbar so viele wie gewollt, nicht nur zwei oder drei.

ich Grenzen, aber es kann auch mit dem, was Stil wollte, wie Hintergrund-Farbe erfolgen.

Mit der Grenze, ist die Idee:

• eine andere Grenzfarbe hat nur ein div, die div über, wo die Maus ist, nicht auf allen Eltern, nicht auf jedem Kind, so dass es sein kann, nur solche div Grenzen in einer anderen Farbe gesehen, während der Rest auf weiß bleibt.

Sie testen es unter: http://jsbin.com/ubiyo3/13

Und hier ist der Code:

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