文本框轉換不起作用，可能是什麼原因造成的？

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> 

我希望文本從300像素的two seconds增長至500像素，但它的增長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

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