When I click on the dropdown, it works fine. However, I encountered an issue when attempting to make it work with hovering instead. The original CSS code for adding a fade effect was taken from this post: 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;
}
Despite my attempts, I failed miserably in trying to implement hover functionality. Here is the code snippet that I tried:
.dropdown:hover>.dropdown-menu.fade {
display: block;
opacity: 0;
pointer-events: none;
}
.show > .dropdown:hover>.dropdown-menu.fade {
pointer-events: auto;
opacity: 1;
}
If you'd like to see an example of this code in action, feel free to check out the CodePen link here: https://codepen.io/anon/pen/LrZxPr