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>

でテキストボックスが 300px から 500px に大きくなると予想して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>

Ps。私は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;
}

jsフィドル

于 2013-04-28T11:27:58.850 に答える