Po najechaniu jednym pseudo elementem, czy pojawi się drugi pseudo element?

Question

Próbowałem wygenerować ekran z wykorzystaniem pseudoelementów :before i :after, ale zastanawiam się, czy taka funkcjonalność jest rzeczywiście możliwa.

Mam wrapper div, który jest owinięty wokół wejścia (pozwalając na pseudo element s na tym opakowaniu).

coś takiego:

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

jednak szukałem mieć element pseudo umieszczony po div.

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

Chciałem móc najechać na ten pseudo element i pojawił się drugi pseudo element.

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

---

Z powyższego projektu urywka, czy istnieje sposób dokonywania element :before zmienić jej krycie kiedy unoszą się tylko element :after, a nie sam div wrap (uwaga : html nie może być zmieniony, stąd dlaczego to pytanie)?

---

Próbowałem przy użyciu coś jak:

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

po zmianie szerokości wejścia do 90%, ale tego nie zrobić różnicę

Answer 1

Wydaje się, ponieważ elementy są elementami pseudo nie „prawdziwe”, oznacza to, że (obecnie) nie mogą być używane w ten sposób. Zamiast tego użycie "prawdziwego" elementu pozwoliłoby na to, dlatego zdecydowałem się użyć elementu zakresu, dopóki ta funkcja nie zostanie zaimplementowana.

Obecna implementacja wyświetlacze:

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>

ku rozczarowaniu mojego ukochanego pseudo elementów projektu.

Answer 2

wiem, że to nie jest dokładnie to, o co prosiłeś ale dopóki css nie wybierze rodziców (jest już dostępny), możesz dodać jeszcze jeden element html:

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

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/