1 
.search-query
{
    width: 300px;
    -webkit-transition: width 2s;
    -moz-transition: width 2s;
    -o-transition: width 2s;
    transition: width 2s;
}

.search-query:hover
{
    width: 500px;
}

<form action="" class="navbar-search pull-right">
    <input type="text" placeholder="Search" class="search-query" />
</form>

我希望文本框从 300 像素增长到 500 像素two seconds，但它会增长instantly。我对 CSS 过渡还很陌生，所以我自己也搞不清楚。但是，它看起来与 完全相同，example on w3schools.com并且可以在那里工作。

有什么问题？

更新：上面的例子在 jsfiddle 中工作，它可能与我的布局有关，所以这里是使用 Twitter Bootstrap 的整个布局。

<div class="navbar">
    <div class="navbar-inner navbar-fixed-top">
        <a class="brand" href="#">Project Name</a>

        <ul class="nav">
            <li><a href="#">Hi</a></li>
            <li><a href="#">Hi</a></li>
        </ul>

        <form action="" class="navbar-search pull-right">
            <input type="text" placeholder="Search" class="search-query" />
            <input type="submit" id="search-submit" name="submit" class="btn btn-success btn-small" value="Search">
        </form>

        <ul class="nav pull-right">
            <li><a href="#">Hi</a></li>
            <li><a href="#">Hi</a></li>
        </ul>       
    </div>
</div>
</body>

附言。我在 FF 20.0.1

4

1 回答 1

1

问题出在 bootstrap.css 的第 1116 行，您已经transition使用更具体的选择器对输入进行了应用，因此请尝试包含祖先类以超过特异性，例如

.navbar .navbar-inner .navbar-search .search-query
{
width: 300px;
-webkit-transition: width 2s;
-moz-transition: width 2s;
-o-transition: width 2s;
 transition: width 2s;
}

.navbar .navbar-inner .navbar-search .search-query:hover
{
width: 500px;
}

jsFiddle

于 2013-04-28T11:27:58.850 回答