Slide input on hover and stay for few seconds(悬停时滑动输入并停留几秒钟)
问题描述
如何在悬停图标时打开输入框,它应该保持打开几秒钟,然后它应该自动滑回初始位置.
How to open the input box on hover an icon and it should stay open for few seconds then it should automatically slide back to the initial position.
我在 css 中尝试过,但我需要使用 jquery 来做到这一点.
I have tried in css but I need to do this using jquery.
悬停时最初会有一个图标,然后图标应该消失,输入框应该滑动.
Initially there will be an icon when hover happens then icon should disappear and input box should slide.
这是我尝试过的演示链接.
Here is the link for the demo what I have tried.
.media{
width:6%;
background:yellow;
height:26px;
cursor:pointer;
display:inline-block;
transition: width 1s;
-moz-transition: width 1s; /* Firefox 4 */
-webkit-transition: width 1s; /* Safari and Chrome */
-o-transition: width 1s; /* Opera */
-ms-transition: width 1s; /* IE9 (maybe) */
vertical-align:top;
overflow:hidden
}
.media:hover{
width:25%;
}
FIDDLE
提前致谢!!
P.S - 我不需要用 CSS 来完成这个(即使是那种过渡效果)
P.S - I dont need this to be done with CSS (even that transition effect)
推荐答案
试试这个:
<script>
$('.media').mouseenter(function(){
$('img').hide();
$('.media').width('25%');
});
$('.media').mouseleave(function(){
setTimeout(function(){
$('.media').width('6%');
setTimeout(function(){$('img').show()},1000);
},3000);
});
</script>
小提琴 http://jsfiddle.net/aVDgk/2/
这篇关于悬停时滑动输入并停留几秒钟的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:悬停时滑动输入并停留几秒钟


- 如何调试 CSS/Javascript 悬停问题 2022-01-01
- 我不能使用 json 使用 react 向我的 web api 发出 Post 请求 2022-01-01
- 如何显示带有换行符的文本标签? 2022-01-01
- 如何向 ipc 渲染器发送添加回调 2022-01-01
- 为什么悬停在委托事件处理程序中不起作用? 2022-01-01
- 为什么我的页面无法在 Github 上加载? 2022-01-01
- 从原点悬停时触发 translateY() 2022-01-01
- 使用 iframe URL 的 jQuery UI 对话框 2022-01-01
- 在不使用循环的情况下查找数字数组中的一项 2022-01-01
- 是否可以将标志传递给 Gulp 以使其以不同的方式 2022-01-01