Boostrap 4导航栏下拉淡出效果在悬停状态下不起作用

Question

Dropdown在单击时运行良好，但在悬停时尝试使其工作时遇到问题。这是最初的Css only代码，用于从这篇文章https://stackoverflow.com/a/47986695/9124081中添加淡入淡出效果。

.dropdown-menu.fade {
       display: block;
       opacity: 0;
       pointer-events: none;
    }

    .show > .dropdown-menu.fade {
       pointer-events: auto;
       opacity: 1;
    }

这就是我尝试悬停的方法，惨败。

.dropdown:hover>.dropdown-menu.fade {
       display: block;
       opacity: 0;
       pointer-events: none;
    }

    .show > .dropdown:hover>.dropdown-menu.fade {
       pointer-events: auto;
       opacity: 1;
    }

codepen示例：https://codepen.io/anon/pen/LrZxPr

Answer 1

不要包含".show“选择器，因为它只应用于onclick。另外，删除您的第一个规则集，只需使用以下内容：

.dropdown:hover>.dropdown-menu.fade {            
 display:block;
 opacity: 1;
}