Question

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

我希望文本框在two seconds中从300px增长到500px，但它会增长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

Answer 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

文本框转换不起作用，可能导致什么？

1 个答案: