Khi di chuột qua một phần tử giả, làm cho phần tử giả khác xuất hiện?

Question

Tôi đã cố gắng tạo màn hình trong đó sử dụng các phần tử giả :before và :after, nhưng tôi tự hỏi liệu chức năng đó có thực sự có thể không.

Tôi có một bao bọc div được bao bọc xung quanh đầu vào (cho phép pseudo element s trên trình bao bọc này).

cái gì đó như:

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

Tuy nhiên, tôi đã tìm cách để có một yếu tố giả đặt sau div.

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

Tôi muốn có thể di chuyển phần tử giả này và có phần tử giả khác xuất hiện.

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

---

Từ việc thiết kế đoạn trên, là có một cách để làm cho các yếu tố :before thay đổi opacity của nó khi tôi di chuột chỉ là yếu tố :after, và không phải là wrap div riêng của mình (lưu ý : html không thể thay đổi, do đó tại sao câu hỏi này)?

---

tôi đã cố gắng sử dụng một cái gì đó như:

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

sau khi thay đổi độ rộng của đầu vào cho 90%, nhưng điều này đã không tạo sự khác biệt

Answer 1

Có vẻ như vì các yếu tố giả không phải là yếu tố 'thực tế', nó có nghĩa là (hiện tại) có thể không được sử dụng theo cách này. Thay vào đó, việc sử dụng phần tử 'thực' sẽ cho phép điều này, và vì vậy tôi đã chọn sử dụng phần tử span cho đến khi tính năng này có thể hoặc không thể được triển khai.

Các màn hình cài đặt hiện tại:

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>

nhiều đến sự thất vọng về thiết kế yếu tố giả yêu quý của tôi.

Answer 2

Tôi biết nó không phải là chính xác những gì bạn yêu cầu nhưng cho đến khi css có thể chọn bố mẹ (nó đang chuyển) bạn chỉ có thể thêm một phần tử html khác:

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