Question

我创建了一个div，当悬停时，会显示一个表单。问题是每次移动光标时都会发生转换，填写表格变得不可能。如何让过渡工作一次，而不是长时间停留/持续？ *我找到了一些关于延迟选项的信息，但我没有找到一种方法来分别修改第一次悬停的延迟时间，然后是当光标移出div时（当＆＃34; unhovering＆＃34; ）
。我正在寻找纯粹的css闷热 HTML：

<form id="women">
          <label >
              <input type="text" name="fullName" >
          </label>
</form>
<div id="wcover"></div>

的CSS：

#wcover{
    right: 177px;
    z-index: 1;
    top: 291px;
    position: absolute;
    width: 337px;
    height: 402px;
    background: yellow;
    -webkit-transition: height 2s; /* For Safari 3.1 to 6.0 */
    transition: height 2s;
}   


#wcover: hover{
    height: 0px;
    background:black;
}

Answer 1

假设您的div位于表单之前，您可以使用转换（例如opacity属性）并延迟＃34; 取消转换＆＃34;

e.g。

标记^（*）

<div id="wcover">hover me</div>

<form id="women">
  <label >whats your name</label>
  <input type="text" name="fullName">
</form>

的CSS

form {
  opacity: 0;
  transition: opacity 1s 999999s;
}

div:hover + form {
  opacity: 1;
  transition: opacity 0s;
}

hover事件发生后，由于插入了延迟，用户可能需要999.999秒（约277.7小时）才能填写表格。

直播示例：http://codepen.io/anon/pen/dPYOLB

^（*）作为旁注，对于标记验证，您不能在标签中插入标题。

Answer 2

你在这里需要一些jQuery .... $("#wcover").hover(function() { $("#wcover").addClass("hovered"); });

还有一些CSS： .hovered { //Properties here }

Answer 3

或者，您可以使用checkbox在点击时显示/隐藏div。关于您是否正在显示代码中显示的表单，或者包含其他表单的div本身，您的问题不是很清楚。

假设您在div内有表格。

＆＃13;

#wcover {
    opacity: 0;
    transition: all 1s;
}
label[for=chk] { cursor: pointer; }
#chk { display: none; }
#chk:checked + #wcover { opacity: 1; }

＆＃13;

<label>
    What's your name? 
    <input type="text" id="fullName" />
</label>
<br /><br />
<label for="chk">Click to Show/Hide Complete Form</label>
<input id="chk" type="checkbox" />
<div id="wcover">
    <form id="women">
    <h2>Complete Form</h2>
      <input type="text" /><br/>
      <input type="text" /><br/>
    </form>
</div>

＆＃13;

Answer 4

你能不把它全部包含在一个包含的div中并将悬停应用到那个？

<div id="form-container">
    <form id="women">
        <label >
            <input type="text" name="fullName" >
        </label>
    </form>
    <div id="wcover"></div>
</div>

Answer 5

您好使用CSS转换延迟属性

#wcover{
    right: 177px;
    z-index: 1;
    top: 291px;
    position: absolute;
    width: 337px;
    height: 402px;
    background: yellow;
    -webkit-transition: height 2s; /* For Safari 3.1 to 6.0 */
    transition: height 2s;
    transition-delay: 1s;
}   
#wcover: hover{
    height: 0px;
    background:black;
    transition-delay: 0s;
}

上面的css会在鼠标输出后给出延迟。只是反过来做其他方式

unhovering后如何让css过渡到最后？

5 个答案: