0

Here is the situation. I have a Hover effect with the bottom line shows when the item has hovered over.

Here is my current CSS code:

    #mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item.mega-toggle-on>a.mega-menu-link {
      background:#fff!important;
     font-family:Gotham-Bold!important;
   }


   #mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item.mega-toggle-on>a.mega-menu-link:after 
   { 
       background:#fff!important;
       font-family:Gotham-Bold!important;
       visibility: inherit;
       display:block;
       content: '';
       border-bottom: solid 3px #cf2734;
       transform: scaleX(0);
       transition: transform 250ms ease-in-out;
       overflow:hidden;  
   }

   #mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item.mega-toggle-on>a.mega-menu-link:hover:after { transform: scaleX(1); transform-origin:   0% 50%; transition-delay: 0s; }

Just using pure CSS (no javascript), is there a way to keep the hover state in the current status?

Thank you

Kevin Davis
  • 1
  • 2
  • you can set a hudge transition delay or duration on the first selector. `a{transition:200000s;} a:hover {color:transition:0.25s;}` . 200000s is a life time on a webpage ... – G-Cyrillus Jun 13 '19 at 21:47
  • ... possible duplicate of https://stackoverflow.com/questions/17100235/make-css-hover-state-remain-after-unhovering/17101357#17101357 if not, turn the transition into animation and use`animation-fill-mode: forwards;` , if still not efficient, only javascript remains :( – G-Cyrillus Jun 13 '19 at 21:50

0 Answers0