在取消悬停后如何才能使css过渡到最后？

I created a div that when hovering, reveals a form. the problem is each time im moving the cursor the transition takes place and filling the form become impossible. how can i make the transition work once and than stay/ last for long time?
*i found some information about the delay option but i didn't find a way to modify the delay time separately for the first hovering and then for when the cursor moves out of the div (when "unhovering")
. im looking for a pure css sulotion HTML:

我创建了一个div,当悬停时,会显示一个表单。问题是每次移动光标时都会发生转换,填写表格变得不可能。如何让过渡工作一次,而不是长时间停留/持续? *我找到了一些关于延迟选项的信息,但我没有找到一种方法来为第一次悬停分别修改延迟时间,然后在光标移出div时(当“悬浮”时)。我正在寻找一个纯粹的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;
}

5 个解决方案

#1

Assuming your div is before the form, you may use a transition (e.g. of the opacity property) with a long delay on "unhover"

假设你的div在表单之前,你可以在“unhover”上使用一个转换(例如不透明属性)和一个长延迟

e.g.

Markup(*)

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

After the hover event, thanks to the delay inserted, the user may takes up to 999.999 seconds (approx.ly 277.7 hours) to fill the form.

悬停事件发生后,由于插入延迟,用户可能需要999.999秒(约277.7小时)才能填写表格。

Live Example: http://codepen.io/anon/pen/dPYOLB

实例:http://codepen.io/anon/pen/dPYOLB

(*)As a side note, for a matter of markup validation, you can't insert an heading into a label.

(*)作为附注,对于标记验证,您不能在标签中插入标题。

5 个解决方案

#1

更多相关文章

随机推荐