javascript - 使用CSS过渡的带有Bootstrap和jQuery的菜单

我正在尝试使用Bootstrap创建一个简单的菜单，如下所示：
的HTML

<ul class="list-inline b-square pull-right">
           <li id="one" data-name="one"><a href="#"></a></li>
          <li id="two" data-name="two"><a href="#"></a></li>
          <li id="three" data-name="three"><a href="#"></a></li>
          <li id="four" data-name="four"><a href="#"></a></li>
          <li id="five" data-name="five"><a href="#"></a></li>
          <li id="six" data-name="six"><a href="#"></a></li>
        </ul>

的CSS

b-square > li {
width : 24px;
height : 24px;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}



.b-square > li:hover {
width: 80px;
color: #fff;
text-align: right;


}

.b-square li#one {
background-color: #000;
padding: 2px 4px;
}

.b-square li#two {
background-color: #F7A600;
padding: 2px 4px;
}

.b-square li#three {
background-color: green;
padding: 2px 4px;
}

.b-square li#four {
background-color: #000;
padding: 2px 4px;
}


.b-square li#five{
background-color: #F7A600;
padding: 2px 4px;
}


.b-square li#six {
background-color: green;
padding: 2px 4px;
}

jQuery的

 $(document).ready(function(){
        $('.b-square > li').hover(function(){

        var name = $(this).data('name');


       $(this).text(name);


        }, function(){
           $(this).text('');

        });


        });

菜单包含六个不同颜色的正方形。 CSS悬停效果增加了li的宽度80px。 jQuery中的悬停功能会添加所选li的链接名称。
脚本可以工作，但是当我将li悬停时，选定的正方形会下降，而不是与其他正方形结盟。
这是一个演示：
https://jsfiddle.net/jobgaraux/s3hdkgog/12/

最佳答案

尝试使用溢出：隐藏：

.b-square > li {
   overflow: hidden;
   width : 24px;
  height : 24px;
  -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
  transition: width 2s;
 }

关于javascript - 使用CSS过渡的带有Bootstrap和jQuery的菜单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36529215/