0

Dropdown works fine when clicking, but got trouble when trying to make it work when hovering. this was the original Css only code for adding a fade efect 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;
    }

And this is what I tried for hover, failing miserably

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

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

codepen example: https://codepen.io/anon/pen/LrZxPr

santih
  • 67
  • 10

1 Answers1

0

Don't include the ".show" selector, as that is only applied onclick. Also drop your first rule-set and just use this:

.dropdown:hover>.dropdown-menu.fade {            
 display:block;
 opacity: 1;
}
partypete25
  • 4,353
  • 1
  • 17
  • 16
  • Thanks for answering. Unfortunately, this piece of code make fade effect not work. Please see updated fiddle – santih Jun 06 '18 at 03:31
  • I dont see the fade working at the moment anyway... For opacity to transition the element cant be set to display:none. So you need to set the dropdown to display:block first.. Try this: .dropdown>.dropdown-menu { display: block; } .dropdown>.dropdown-menu { opacity: 0; transition: all .3s ease; } .dropdown-menu.show, .dropdown:hover>.dropdown-menu { opacity: 1; } – partypete25 Jun 06 '18 at 05:49
  • There is a problem with that code, when you hover under the dropdown it activates the dropdown menu. Never mine I just used this and works like a charm, is more code but so be it, is only css https://stackoverflow.com/a/15509447/9124081 – santih Jun 06 '18 at 19:52
  • Ok. If you add overflow: hidden to the dropdown and change that to visible on hover it should also work. .dropdown { overflow:hidden; } .dropdown:hover { overflow:visible; } – partypete25 Jun 07 '18 at 01:30