Bootstrap dropdownをマウスオーバーで開く

もはや使わないひとはいなであろう、CSSフレームワークのディファクトスタンダードBootstrap。
バーション４のベータも普通に使用して、wordpressテーマを作成さるかたも採用していますね。

標準のdropdownはクリックで開くようになっています。これをマウスオーバーで自動的に開くようにしたいです。

※ナビゲーションをスマホと共有したいひとはクリックしてドロップダウンにしないとダメです。マウスオーバーできませんからね。

スポンサードリンク

CSS

@media (min-width: 620px) {
.dropdown:hover &gt; .dropdown-menu{
display: block;
}
}

@media (min-width: 620px) {

.dropdown:hover > .dropdown-menu{

display: block;

}

解説

親要素をBlockにしてあげるだけです。

HTML

Bootstrap初期値のHTMLでは、親要素にaタグがあるため、ホバーした際にマウスカーソルがリンクの時のそれになってしまいます。

&lt;li class="dropdown"&gt;
&lt;span class="dropdown-toggle" data-toggle="dropdown"&gt;親&lt;b class="caret"&gt;&lt;/b&gt;&lt;/span&gt;
&lt;ul class="dropdown-menu row"&gt;
&lt;li&gt;&lt;a href="A.html"&gt;子A&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="B.html"&gt;子B&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="C.html"&gt;子C&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="D.html"&gt;子D&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="E.html"&gt;子E&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="F.html"&gt;子F&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;

</ul>

</li>

解説

親要素をspanにしてあげるだけです。って書いてみたらそんなブログに上げるような大したこと書いてないな。