CSS: Hintergrund des oberen Elements versteckt Kind-Element Überlauf

Question

Ich brauche dies derzeit in CSS zu tun:

Dies ist ein vertikales Menü so die gelbe „div“ count nicht festgelegt ist, 5 sein könnte wie es 7.

Vorerst sein könnte, habe ich ein div mit diesem CSS angewendet:

#main-menu { 
    width: 250px; 
    height: 100%; 
    padding-top: 50px; 
} 

, dass die gelbe div (nichts besonderes) enthält. Dann habe ich ein „vor“ pseudo-Element wie folgt:

#main-menu::before { 
    height:624px; 
    width:250px; 
    background-image: url("../img/SSC_fondgris_96_Background.png"); 
    content: " "; 
    position:absolute; 
    top:0; 
} 

Das verwendete Bild ist nur die Kurve mit einem transparenten Hintergrund auf der linken Seite und dem Grau auf der rechten Seite. Dies ergibt das obige Bild. Das Problem ist, dass ich einen Hover-Effekt auf die gelben divs haben möchte, aber ich kann das nicht bekommen, weil das "before" -Element über ihnen liegt (was erwünscht ist, damit die Kurve den Überlauf von. Verstecken kann) gelbe Elemente) und daher wird der "Hover" -Effekt nicht auf die gelben divs angewendet.

Ich vermute, dass es ist, weil der Hover auf dem Pseudonym "vor" -Element getan wird, und das ist genau mein Problem. Die Frage ist also: Ist es möglich, ein Bild zu haben, das den Überlauf von Kindelementen verdeckt, aber diesen Kindern erlaubt, einen Hover-Effekt zu haben? Bascailly, ein Z-Index für Hover-Effekt: -D

Das hier Ziel wäre auch JavaScript zu vermeiden sein, um mit solchen Dingen zu tun ...

Answer 1

Verwenden pointer-events:none auf dem Pseudoelement

Von MDN

Die CSS-Eigenschaft Zeiger Mit events können Autoren steuern, unter welchen Umständen (falls vorhanden) ein bestimmtes Grafikelement zum Ziel von Mausereignissen werden kann. Wenn diese Eigenschaft nicht angegeben ist, gelten die gleichen Eigenschaften des visiblePainted-Werts für den SVG-Inhalt.

ul { 
 
    list-style: none; 
 
    width: 50%; 
 
    position: relative; 
 
} 
 
ul::before { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 25%; 
 
    height: 100%; 
 
    top: 0; 
 
    right: 0; 
 
    background: rgba(255, 0, 0, 0.5); 
 
    pointer-events: none; 
 
} 
 
li { 
 
    padding: 25px 0; 
 
    background: #000; 
 
    margin-bottom: 1em; 
 
} 
 
li:hover { 
 
    background: orange; 
 
}

<ul> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

Answer 2

Sie den Effekt erzielen können Sie durch die Einführung eines dritten wollen, transparent Element, das Sie über dem transparenten/grauen Bild positionieren.

Wenn Ihr drittes, transparentes Element genau deckungsgleich mit dem gelben div ist (zwei Schichten unten), dann können Sie :hover Effekte auf das oberste, transparente Element anwenden und es wird aussehen das am weitesten unten Elemente reagiert der Schwebeflug.

Answer 3

sollten Sie in der Lage sein, das Pseudo-Element „durch Klick“ durch den Zeiger Ereignisse auf dem Element zu negieren:

#main-menu::before { 
    height:624px; 
    width:250px; 
    background-image: url("../img/SSC_fondgris_96_Background.png"); 
    content: " "; 
    position:absolute; 
    top:0; 
    /* Add the below */ 
    pointer-events: none; 
} 

... lassen Sie mich wissen, wie das funktioniert für Sie.

ich diese Browser-Unterstützung hinzufügen muß, ist ein wenig obwohl ausweichen - nur IE11 ... caniuse - pointer-events