Bir sözde öğenin üzerine geldiğinde, diğer sözde öğeyi görünmesini sağlayın.

Question

:before ve :after sözde öğelerin kullanıldığı bir ekran oluşturmaya çalışıyordum, ancak böyle bir işlevin gerçekten mümkün olup olmadığını merak ediyorum.

Bir girdinin etrafına sarılmış bir sarmalayıcı divum var (bu sarıcıda pseudo element s için izin veriyor). gibi

şey:

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

Ancak, ben div sonra konumlandırılan bir sözde elemanı olması arıyordu.

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

Bu sahte öğenin üzerine gelebilmek ve diğer sözde öğenin görünmesini istiyorum.

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

yukarıdaki pasajı tasarımından

---

, ben sadece :after eleman getirdiğinizde :before eleman olan donukluk değiştirmek yapmanın bir yolu yoktur, ve wrap div kendisi (not : html değiştirilemez, bu nedenle neden bu soru)?

---

ben gibi bir şey kullanarak çalıştı: 90% girdi genişliğini değiştirdikten sonra

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

ama bu sana ne sordu tam olarak değil biliyorum Fark

Answer 1

O sözde elemanları değildir çünkü 'gerçek' elemanları, bu (şu anda) bu şekilde kullanılamaz anlamına gelir görünüyor. Bunun yerine, 'gerçek' bir elemanın kullanılması buna izin verecek ve bu özellik uygulanana kadar ya da uygulanamayana kadar bir span elemanı kullanmayı tercih ettim.

şu anki uygulama görüntüler: sevgili sözde elemanı tasarımının hayal kırıklığı

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>

Çok.

Answer 2

yapmadığını

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

: css anne (o geliyor ediyor) seçebilirsiniz için değil kadar sadece bir tane daha html öğesi ekleyin olabilir

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/