Boostrap 4导航栏下拉淡化效果在悬停时不起作用

Question

单击时下拉工作正常，但在悬停时尝试使其工作时遇到麻烦。这是用于添加此帖https://stackoverflow.com/a/47986695/9124081

的淡入淡出效果的原始Css代码

.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”选择器，因为它仅适用于单击。同时删除第一个规则集并使用它：

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