Beim Schweben eines Pseudo-Elements, das andere Pseudo-Element erscheinen lassen?

Question

Ich habe versucht, einen Bildschirm zu generieren, in dem die :before und :after Pseudo-Elemente verwendet werden, aber ich frage mich, ob eine solche Funktionalität tatsächlich möglich ist.

Ich habe eine Wrapper div, die um einen Eingang gewickelt ist (so dass pseudo element s auf diesem Wrapper).

so etwas wie:

+-----------------------------------+ 
| +-------------------------------+ | 
| |        | | <-- wrapper div 
| +-------------------------------+ <-- input element 
+-----------------------------------+ 

aber ich war auf der Suche ein Pseudo-Element nach dem div positioniert haben.

+-----------------------------------++-------+ 
| +-------------------------------+ | |¯¯¯| | 
| |        | | / | 
| +-------------------------------+ | ! |<--pseudo element 
+-----------------------------------++-------+ 

Ich wollte in der Lage sein, dieses Pseudo-Element zu schweben, und das andere Pseudo-Element erscheinen zu lassen.

.wrap { 
 
    position: relative; 
 
    height: 30px; 
 
    width: 200px; 
 
    display: inline-block; 
 
} 
 
.wrap input { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.wrap:after { 
 
    content: "?"; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 100%; 
 
    height: 30px; 
 
    width: 30px; 
 
    font-size: 30px; 
 
    text-align: center; 
 
} 
 
.wrap:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    height: 60px; 
 
    width: 100%; 
 
    background: tomato; 
 
    opacity:0.2; 
 
}

<div class="wrap"> 
 
    <input placeholder="input element" type="text" /> 
 
</div>

---

Aus dem obigen Schnipsel-Design, ist es eine Möglichkeit, das zu machen :before Element seine Opazität ändern, wenn ich nur das :after Element schweben und nicht die wrap div selbst (Anmerkung : html kann nicht geändert werden, daher warum diese Frage)?

---

Ich habe versucht, etwas mit wie:

.wrap:not(input):hover:before{ 

nach der Breite des Eingangs zu 90% ändern, aber dies hat keinen Unterschied

Answer 1

Es scheint, die da Pseudo-Elemente sind nicht ‚echte‘ Elemente, bedeutet dies, dass die (derzeit) nicht auf diese Art und Weise verwendet werden. Stattdessen würde die Verwendung eines "echten" Elements dies zulassen, und daher habe ich gewählt, ein span-Element zu verwenden, bis diese Funktion implementiert werden kann oder nicht.

Die aktuelle Implementierung zeigt:

input { 
 
    position: relative; 
 
    display: inline-block; 
 
    height: 30px; 
 
    vertical-align: top; 
 
} 
 
span { 
 
    position: relative; 
 
    height: 30px; 
 
    width: 30px; 
 
    display: inline-block; 
 
    text-align: center; 
 
    border-radius: 50%; 
 
    font-size: 25px; 
 
    line-height: 30px; 
 
    background: tomato; 
 
} 
 
span:after { 
 
    content: "A Question Mark"; 
 
    position: relative; 
 
    display: inline-block; 
 
    top: 0; 
 
    left: 0; 
 
    height: 60px; 
 
    width: 100px; 
 
    background: tomato; 
 
    opacity: 0; 
 
    transition: all 0.8s; 
 
    font-size: 16px; 
 
} 
 
span:hover:after { 
 
    opacity: 1; 
 
}

<input placeholder="input element" type="text" /> 
 
<span>?</span>

Sehr zur Enttäuschung meines geliebten Pseudo-Element-Design.

Answer 2

machen Ich weiß es nicht genau das, was Sie gefragt für aber, bis css Eltern wählen kann (es kommt), konnten Sie gerade ein weiteres html Element hinzufügen:

css:

.wrap { 
    position: relative; 
    height: 30px; 
    width: 200px; 
    display: inline-block; 
} 
.wrap input { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
} 
.wrap:after { 
    content: "?"; 
    position: absolute; 
    top: 0; 
    left: 100%; 
    height: 30px; 
    width: 30px; 
    font-size: 30px; 
    text-align: center; 
} 
.inner_wrap:before { 
    content: ""; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    height: 60px; 
    width: 100%; 
    background: tomato; 
    opacity:0.2; 
    display:none; 
} 
.wrap:hover .inner_wrap:before{ 
    display:block; 
} 
.wrap .inner_wrap:hover:before{ 
    display:none; 
} 

http://fiddle.jshell.net/0vwn1w9t/