Css 如何制作Twitter引导程序'；拆分按钮下拉列表'；鼠标悬停而不是单击时下拉？

我用的是一个。当鼠标悬停在上方时，而不是单击箭头时，如何使其下拉

---

这与类似，但适用于不同的Twitter引导元素。

此问题的解决方案与链接中的问题几乎相同。您需要向将显示下拉列表的：hover伪选择器添加一些CSS。悬停的元素必须包含按钮和下拉列表。在下面的示例中，我将

btn hover

类添加到按钮组中，作为我的悬停选择器

        <div class="btn-group btn-hover">
          <button class="btn dropdown-toggle" data-toggle="dropdown" href="#">
            Action
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a href="#">Test</a></li><!-- dropdown menu links -->
            <li><a href="#">Test 2</a></li><!-- dropdown menu links -->
          </ul>
        </div>

---

将此代码用于较大的设备悬停效果和较小的设备单击效果：

$(document).ready(function(){

  $('.dropdown').append("<style type='text/css'>@media screen and (min-width: 768px) { .dropdown:hover .dropdown-menu {display: block;} }</style>"); 

});

$（文档）.ready（函数（）{
$（'.dropdown'）.append（“@媒体屏幕和（最小宽度：768px）{.dropdown:hover.dropdown菜单{display:block；}”）；
});

$(document).ready(function(){

  $('.dropdown').append("<style type='text/css'>@media screen and (min-width: 768px) { .dropdown:hover .dropdown-menu {display: block;} }</style>"); 

});