我试图生成一个利用:before
和:after
伪元素的屏幕,但我想知道这种功能是否确实可行。
我有一个包装div,它围绕一个输入pseudo element
包装(在此包装上允许s)。
就像是:
+-----------------------------------+
| +-------------------------------+ |
| | | | <-- 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%
,但这没有什么区别
似乎是因为伪元素不是“真实”元素,这意味着(当前)不能以这种方式使用。取而代之的是,使用'real'元素将允许这样做,因此我选择使用span元素,直到可能实现或可能不实现此功能。
当前实现显示:
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>
我心爱的伪元素设计令人失望。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句