我正在努力做到这一点。
http://i.stack.imgur.com/9sAKz.png
基本上,我有一个输入,我想在该图标上添加一个图标,以便在用户将其悬停时显示工具提示。我的主要问题是了解最佳实践,以便在不破坏html结构(响应式结构或真正的旧式html结构)的情况下将图标插入输入中。
EDIT1:这是我一直在尝试使用的逻辑。
.wrapper{
position:relative;
display:inline-block;
}
.myImage{
position:absolute;
top:3px;
right:5px;
}
<div class="wrapper">
<input type="text">
<img class="myImage" src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-1/16/information-icon.png">
</div>
我正在开发一个插件,我在其中接收字段ID,然后在这些输入中创建图标,以便以后可以显示工具提示。
我试图去一个网站,该网站具有较旧的结构化表单,而不是响应式表单。而且很少有人使用“ display:inline-block”在显示方面出现问题。
PS:我的问题是将包装器div + display:inline-block设置为某些较旧的结构化形式,在某些形式中,应用这些属性后,它们将保持断开状态(超出原始位置)。
您可以使用pseudo element
来实现这种功能。自从
伪元素不能直接放置在输入标签上
,我将输入包装在div中,然后将伪装在其上:
div {
display: inline-block;
}
.cp3 input {
width: 50px;
}
input {
padding: 10px;
height: 30px;
}
.cp4 {
position: relative;
transition: all 0.8s;
}
.cp4:hover:before {
content: "";
position: absolute;
right: 5%;
height: 30px;
width: 30px;
background: url(http://cdn.flaticon.com/png/256/64494.png);
background-size: 30px 30px;
top: 10px;
}
<div class="wrap">
<div class="label">Postal Code</div>
<div class="cp4">
<input type="text" />
</div>
<div class="cp3">
<input type="text" />
</div>
</div>
使用绝对定位的元素,然后将鼠标悬停在图标上时,您也可以使用~
(同级选择器)显示工具提示。
为了使用css进行任何“淡入”,我已经将其应用了opacity:0 --> opacity:1
一个不错的过渡。可以在下面的示例中显示:
.myInput {
position: relative;
display: inline-block;
height: 30px;
width: 200px;
background: gray;
transition: all 0.8s;
}
.myInput div,
input {
position: absolute;
display: inline-block;
}
input {
height: 30px;
width: 200px;
}
.tooltip {
transition: all 0.8s;
opacity: 0;
height: 30px;
width: 30px;
position: absolute;
background: url(http://cdn.flaticon.com/png/256/64494.png);
background-size: 30px 30px;
right: 0;
top:5%;
}
.myInput:hover .tooltip{
opacity:1;
}
.tooltip:hover ~.msg{
opacity:1;
}
.msg{
transition: all 0.8s;
top:35px;
left:100px;
opacity:0;
}
.toRight{
top:0;
left:220px;
width:300px;
}
Hover the textbox, then the icon
<br/>
<hr/>
<br/>
<div class="myInput">
<input type="text" placeholder="text here" />
<div class="tooltip"></div>
<div class="msg">message here</div>
<div class="msg toRight">Or even here</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句