Question

如何在悬停图标时打开输入框，它应该保持打开状态几秒钟，然后它会自动滑回到初始位置。

我在css中尝试过，但我需要使用jquery来完成。

最初在悬停发生时会有一个图标，然后图标应该消失，输入框应该滑动。

以下是我尝试过的演示链接。

.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完成（即使是过渡效果）

Answer 1

您可以查看CSS动画。

Answer 2

试试这个：

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

悬停时滑动输入并保持几秒钟

2 个答案: