我已经阅读过与我相似的问题的答案,但我无法理解它是如何工作的。我想要一种方式,一个盒子在一个区域悬停的地方缓慢消失并以同样的方式消失,而不是突然。
在我的代码中,当用户将鼠标悬停在某个特定区域时,一个框应该出现带有说明的框(并且当该区域没有悬停时消失)
这是html:
<div class="third">
<label> Enter Password: </label>
<input type="text" name="pword1" class="iBox" id="pword1" onmouseout="HideToolTip()" onmouseover="ShowToolTip()" onkeyup="allFunctions()" placeholder="choose a password" autocomplete="off">
<p id="tooltipbox" style="position:absolute;visibility:hidden">Password must be between 8-16 characters, contain an uppercase, lowercase, number and special character</p>
</div>
这是css:
#tooltipbox{
font-size: 14px;
border: 2px solid blue;
width: 200px;
height: 100px;
background-color: red;
-o-transition:color .2s ease-out, background 1s ease-in;
-ms-transition:color .2s ease-out, background 1s ease-in;
-moz-transition:color .2s ease-out, background 1s ease-in;
-webkit-transition:color .2s ease-out, background 1s ease-in;
transition:color .2s ease-out, background 1s ease-in;
}
目前它已接近完美,但它不会慢慢淡入淡出,这就是我想要的。它只是在鼠标结束时突然出现/消失。我怎样才能获得所需的淡化效果?
P.S。我只想在css而不是js中这样做 感谢
vincent的代码:
<div class="third">
<label> Enter Password: </label>
<input type="text" name="pword1" class="iBox" id="pword1" onmouseout="HideToolTip()" onmouseover="ShowToolTip()" onkeyup="allFunctions()" placeholder="choose a password" autocomplete="off">
<div id="test">
<p>Password must be between 8-16 characters, contain an uppercase, lowercase, number and special character</p>
</div>
</div>
#test p{
font-size: 14px;
border: 2px solid blue;
width: 200px;
height: 100px;
background-color: red;
}
#test p:hover {
color:black;
animation: fadein 2s;
-webkit-animation: fadein 2s; /* Safari and Chrome */
}
@-webkit-keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
答案 0 :(得分:2)
我认为你想要设置不透明度的动画,而不是背景。
将不透明度初始化为0,设置动画:
opacity: 0;
-o-transition: opacity .2s ease-in-out;
-ms-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
悬停时将不透明度设置为1:
.third:hover #tooltipbox{
opacity: 1;
}
答案 1 :(得分:1)
这可能是您正在寻找的效果:http://jsfiddle.net/9jqrz813/1/
HTML:
<div class="third">
<label> Enter Password: </label>
<input type="text" name="pword1" class="iBox" id="pword1" onmouseout="HideToolTip()" onmouseover="ShowToolTip()" onkeyup="allFunctions()" placeholder="choose a password" autocomplete="off">
<p id="tooltipbox">Password must be between 8-16 characters, contain an uppercase, lowercase, number and special character</p>
</div>
CSS:
#tooltipbox {
padding: 10px;
color: red;
/* HOVER OFF */
-webkit-transition: color 2s;
-moz-transition: color 2s;
-o-transition: color 2s;
transition: color 2s;
}
#tooltipbox:hover {
padding: 10px;
color: white;
/* HOVER ON */
-webkit-transition: color 2s;
-moz-transition: color 2s;
-o-transition: color 2s;
transition: color 2s;
}