gpt4 book ai didi

html - 取消悬停后如何使 css 过渡持续?

转载 作者:行者123 更新时间:2023-11-28 12:38:01 25 4
gpt4 key购买 nike

我创建了一个 div,悬停时会显示一个表单。问题是每次我移动光标时都会发生转换并且无法填写表格。我怎样才能使过渡工作一次而不是停留/持续很长时间?
*我找到了一些关于延迟选项的信息,但我没有找到一种方法来分别修改第一次悬停和光标移出 div 时的延迟时间(当“取消悬停”时)
。我正在寻找一个纯 css sulotionHTML:

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

最佳答案

假设您的 div 在表单之前,您可以使用一个过渡(例如 opacity 属性)在“unhover”上有很长的延迟

例如

标记(*)

<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


(*)附带说明一下,对于标记验证问题,您不能将标题插入标签。

关于html - 取消悬停后如何使 css 过渡持续?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27230049/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com