При наведении курсора на один псевдоэлемент, чтобы появился другой псевдоэлемент?
Я пытался создать экран, в котором используется:before
а также:after
псевдоэлементы, но мне интересно, возможна ли такая функциональность на самом деле.
У меня есть div-обертка, которая обернута вокруг ввода (с учетомpseudo element
на этой обертке).
что-то вроде:
+-----------------------------------+
| +-------------------------------+ |
| | | | <-- wrapper div
| +-------------------------------+ <-- input element
+-----------------------------------+
Тем не менее, я искал псевдоэлемент, расположенный после div.
+-----------------------------------++-------+
| +-------------------------------+ | |¯¯¯| |
| | | | / |
| +-------------------------------+ | ! |<--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>
Из приведенного выше дизайна фрагмента, есть ли способ сделать:before
элемент меняет свою непрозрачность, когда я парю только:after
элемент, а неwrap
сам div (примечание: html нельзя изменить, поэтому, почему этот вопрос)?
Я пытался использовать что-то вроде:
.wrap:not(input):hover:before{
после изменения ширины входа на90%
, но это не имело значения