Question

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

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

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

Answer 1

我认为你想要设置不透明度的动画，而不是背景。

将不透明度初始化为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/

Answer 2

这可能是您正在寻找的效果：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;
}

使用css淡出效果？

2 个答案: