如何使 css 过渡在取消悬停后持续

Question

我创建了一个div，当悬停时，会显示一个表单。 问题是每次IM移动光标时都会发生过渡，并且无法填写表单。 我怎样才能使过渡工作一次，而不是停留/持续很长时间？
*我找到了有关延迟选项的一些信息，但我没有找到一种方法来单独修改第一次悬停的延迟时间，然后是光标移出div 时（"取消悬停"时）。
我正在寻找一个纯粹的 CSS sulotion.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属性），在"取消悬停"上长时间延迟

例如

标记^（*）

<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 秒（approx.ly 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里面有一个表格。

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

<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>

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 会在鼠标出来后给出延迟。 只是尊敬它以其他方式做