0

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

我在 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%;
}

小提琴

提前致谢！！

PS - 我不需要用 CSS 来完成这个（即使是那种过渡效果）

4

2 回答 2

1

你可以看看 CSS Animations。

于 2013-05-06T10:12:18.367 回答
0

试试这个：

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

于 2013-05-06T10:18:03.007 回答