我试图生成一个屏幕,其中利用：before和：after伪元素,但我想知道这样的功能是否实际上是可能的.
我有一个包装器div,它绕着一个输入(允许这个包装上的伪元素).
就像是：
+-----------------------------------+ | +-------------------------------+ | | | | | <-- 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>
从上面的代码段设计,有一种方法：当元素改变它的不透明度时,我只有：after元素,而不是wrap div本身(注意：html不能改变,因此为什么这个问题)？
我试过使用像：
.wrap:not(input):hover:before{
将输入宽度改为90％后,这并没有什么变化
解决方法
我知道这不是你所要求的,但直到css可以选择父母(它是通过),你可以再添加一个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;
}
