jquery - Bootstrap yamm hover on dropdown set another to to display block

Question

我使用 yamm.css 在悬停时使用以下代码制作 super 导航子菜单显示:

 ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
 } 

上面的工作正常，但是我有另一个 div 在 css 中设置为 display:none;这个 div 叫做

我想要发生的是，当我将鼠标悬停在导航菜单上时，子菜单将显示，然后将 bgCover 设置为 display:block;悬停时。

可以用 CSS 来做吗？我已经尝试了以下但不起作用:

 ul.nav li.dropdown:hover > ul.dropdown-menu .bgCover,
 ul.nav li.dropdown:hover .bgCover {
    display: block;    
 } 

谢谢

Answer 1

您可以使用 jQuery 来实现这一点:

加载 jQuery。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

将鼠标悬停在“下拉菜单”上时显示“bgCover”。

<script>
    $( "ul.nav li.dropdown" ).hover(
        function() {
        $(".bgCover").show();
    });
</script>