How can I make css transition last after unhovering? - html

Question

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

Assuming your div is before the form, you may use a transition (e.g. of the opacity property) with a long delay on "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.
Live Example: 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.

Answer 2

You properly need some jQuery here....
$("#wcover").hover(function() {
$("#wcover").addClass("hovered");
});
And some CSS:
.hovered { //Properties here }

Answer 3

Alternatively, you could make use of a checkbox to show/hide your div on click. It is not very clear from your question as to whether you are showing the form which is shown in your code, or the div itself which contains another form.
Am assuming, that you have a form inside the 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

Could you not wrap it all in a containing div and apply the hover to that?
<div id="form-container">
<form id="women">
<label >
<input type="text" name="fullName" >
</label>
</form>
<div id="wcover"></div>
</div>

Answer 5

Hi Use CSS transitionn delay property
#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;
}
The above css will give delay after the mouse out. just reverce it to do it other way