css - クリックではなく、ホバー時にTwitter Bootstrapの「分割ボタンドロップダウン」ドロップダウンを作成するにはどうすればよいですか?

Question

Twitter Bootstrap 分割ボタン ドロップダウンを使用しています。矢印をクリックしたときではなく、ホバーしたときにドロップダウンにするにはどうすればよいですか?

これはこの前の質問に似ていますが、別の Twitter Bootstrap 要素用です。

Answer 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;    
}

Answer 2

デバイスのホバー効果を大きくし、デバイスのクリック効果を小さくするには、次のコードを使用します。

$(document).ready(function(){

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

});