使用css淡出效果?

时间:2015-01-29 16:05:27

标签: html css css3

我已经阅读过与我相似的问题的答案,但我无法理解它是如何工作的。我想要一种方式,一个盒子在一个区域悬停的地方缓慢消失并以同样的方式消失,而不是突然。

在我的代码中,当用户将鼠标悬停在某个特定区域时,一个框应该出现带有说明的框(并且当该区域没有悬停时消失)

这是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;
    }
}

2 个答案:

答案 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;
}

http://jsfiddle.net/eypm4v5u/

答案 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;
}