制作：用户点击链接后，焦点样式仍然存在

我创建了一个带有几个链接的移动汉堡包菜单。 您可以在此处查看源代码：

 
 
 
 
 
 
 
 
 
 
?מהי רגולציה
 
 
 
 
 
אודות
 
 
 
 
 
?למי זה מתאים
 
 
 
 
 
פתרונות
 
 
 
 
 
צור קשר
 
 
 
 
 
 
 
 
 
 
 
  |  052-6582643
 
 
 
 
  jQuery( document ).ready(function() { jQuery('.menu-item-text').on('click',function(){ jQuery('.menu-item-text').removeClass('active'); jQuery(this).addClass('active'); }); });  
 
 
 
 
 
 
 
  

一旦用户点击菜单中的一个链接，菜单就会关闭，并且他会被导航到他点击的任何地方。 我想用CSS创建的边框效果保留在那里，所以他会在导航中有一个标记：

 #menu-solutions:hover .menu-item-text, #menu-solutions:focus .menu-item-text, #menu-solutions:active .menu-item-text{ border-bottom: 2.11px solid #61f6ff; padding: 4px; box-sizing:border-box; margin-bottom: 4px; } #about-menu-mobile:hover .menu-item-text, #about-menu-mobile:focus .menu-item-text, #about-menu-mobile:active .menu-item-text{ border-bottom: 2.11px solid #61f6ff; border-top: 2.11px solid #61f6ff; padding: 4px; box-sizing:border-box; margin-bottom: 4px; } #contact-menu-mobile:hover .menu-item-text, #contact-menu-mobile:focus .menu-item-text, #contact-menu-mobile:active .menu-item-text{ border-bottom: 2.11px solid #61f6ff; border-top: 2.11px solid #61f6ff; padding: 4px; box-sizing:border-box; margin-bottom: 4px; } #regulation-menu-mobile:hover .menu-item-text, #regulation-menu-mobile:focus .menu-item-text, #regulation-menu-mobile:active .menu-item-text{ border-bottom: 2.11px solid #61f6ff; border-top: 2.11px solid #61f6ff; padding: 4px; box-sizing:border-box; margin-bottom: 4px; } #menu-solutions .menu-item-text { border-bottom: 2.11px solid transparent; border-top: 2.11px solid transparent; padding: 4px; box-sizing:border-box; margin-bottom: 4px; } 

您还可以查看链接： www.mayabarber.co.il有可能吗？

谢谢

Answer 1

你当然可以。 只需用以下代码替换上面的CSS代码：

 .elementor-widget-wrap .elementor-heading-title > a:hover .menu-item-text, .elementor-widget-wrap .elementor-heading-title > a:focus .menu-item-text, .elementor-widget-wrap .elementor-heading-title > a:active .menu-item-text, .elementor-widget-wrap .elementor-heading-title > a .menu-item-text.active{ border-bottom: 2.11px solid #61f6ff; border-top: 2.11px solid #61f6ff; padding: 4px; margin-bottom: 4px; } 

工作jsfiddle

Answer 2

我想为活动类定义样式应该适合你。

 .active { border-bottom: 2.11px solid #61f6ff; padding: 4px; box-sizing: border-box; margin-bottom: 4px; }