如何在悬停而不是单击时制作 Twitter Bootstrap 的“拆分按钮下拉菜单”下拉菜单？

Posted 2023-03-06

【中文标题】如何在悬停而不是单击时制作 Twitter Bootstrap 的“拆分按钮下拉菜单”下拉菜单？

【英文标题】：How can I make a Twitter Bootstrap 'Split button dropdown' dropdown on hover rather than click?

【发布时间】：2012-05-31 14:31:50

【问题描述】：

我正在使用Twitter Bootstrap split button dropdown。如何在鼠标悬停而不是单击箭头时使其下拉？

这类似于 this previous question，但用于不同的 Twitter Bootstrap 元素。

【参考方案1】：

此问题的解决方案与您链接中的问题几乎相同。您需要向 :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>

CSS：

div.btn-group:hover ul.dropdown-menu
    display: block;    


div.btn-group ul.dropdown-menu
    margin-top: 0px;    

【参考方案2】：

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

$(document).ready(function()

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

);