文本框转换不起作用，可能是什么原因造成的？

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