用户单击链接后，使:focus样式保留在那里 [英] Make :focus styling remain there after the user clicks the link
本文介绍了用户单击链接后，使:focus样式保留在那里的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了带有几个链接的移动汉堡菜单.您可以在此处检查源代码:
I have created a mobile hamburger menu with several links. You can examine the source code here:
<div class="elementor-widget-wrap">
<div data-id="da3c1dd" class="elementor-element elementor-element-da3c1dd elementor-widget elementor-widget-spacer" data-element_type="spacer.default">
<div class="elementor-widget-container">
<div class="elementor-spacer">
<div class="elementor-spacer-inner"></div>
</div>
</div>
</div>
<div data-id="5fa72fd" class="elementor-element elementor-element-5fa72fd elementor-widget elementor-widget-heading" id="regulation-menu-mobile" data-element_type="heading.default">
<div class="elementor-widget-container">
<h4 class="elementor-heading-title elementor-size-default"><a href="#regulation-mobile"><span class="menu-item-text"><span align="center">?מהי רגולציה</span></span></a></h4> </div>
</div>
<div data-id="4e7c2bc" class="elementor-element elementor-element-4e7c2bc elementor-widget elementor-widget-heading" id="about-menu-mobile" data-element_type="heading.default">
<div class="elementor-widget-container">
<h4 class="elementor-heading-title elementor-size-default"><a href="#mayaaboutmob"><span class="menu-item-text"><span align="center">אודות</span></span></a></h4> </div>
</div>
<div data-id="45788e2" class="elementor-element elementor-element-45788e2 elementor-widget elementor-widget-heading" id="about-menu-mobile" data-element_type="heading.default">
<div class="elementor-widget-container">
<h4 class="elementor-heading-title elementor-size-default"><a href="#fit-mobile"><span class="menu-item-text"><span align="center">?למי זה מתאים</span></span></a></h4> </div>
</div>
<div data-id="2a24b44" class="elementor-element elementor-element-2a24b44 elementor-widget elementor-widget-heading" id="about-menu-mobile" data-element_type="heading.default">
<div class="elementor-widget-container">
<h4 class="elementor-heading-title elementor-size-default"><a href="#solution-mobile"><span class="menu-item-text"><span align="center">פתרונות</span></span></a></h4> </div>
</div>
<div data-id="fcd1ddb" class="elementor-element elementor-element-fcd1ddb elementor-widget elementor-widget-heading" id="contact-menu-mobile" data-element_type="heading.default">
<div class="elementor-widget-container">
<h4 class="elementor-heading-title elementor-size-default"><a href="#contact-mobile"><span class="menu-item-text"><span align="center">צור קשר</span></span></a></h4> </div>
</div>
<section data-id="23d1d02" class="elementor-element elementor-element-23d1d02 elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-section elementor-inner-section" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-row">
<div data-id="b6d5052" class="elementor-element elementor-element-b6d5052 column-contact elementor-column elementor-col-100 elementor-inner-column" data-element_type="column">
<div class="elementor-column-wrap elementor-element-populated">
<div class="elementor-widget-wrap">
<div data-id="4f72658" class="elementor-element elementor-element-4f72658 mobilemenucontact elementor-widget elementor-widget-text-editor" id="mobilemenucontact" data-element_type="text-editor.default">
<div class="elementor-widget-container">
<div class="elementor-text-editor elementor-clearfix"><p class="makeSmall" style="text-align: center;"><img class="email-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-1.svg" width="33" height="33"> <img class="facebook-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-2.svg" width="33" height="33"> <label style="color: #61f6ff;" data-mce-fragment="1">| <span style="color: #001a71;" data-mce-fragment="1"> 052-6582643</span></label></p></div>
</div>
</div>
<div data-id="3829e8b" class="elementor-element elementor-element-3829e8b elementor-widget elementor-widget-html" data-element_type="html.default">
<div class="elementor-widget-container">
<script>
jQuery( document ).ready(function() {
jQuery('.menu-item-text').on('click',function(){ jQuery('.menu-item-text').removeClass('active'); jQuery(this).addClass('active'); });
});
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
一旦用户单击菜单中的链接之一，菜单就会关闭，并且他会导航到他单击的任何位置.我希望使用CSS创建的边框效果保留在那里，因此他将在导航中留下一个标记:
Once the user clicks one of the links in the menu, the menu closes and he is navigated to wherever he clicked. I want the border effect I created with CSS to remain there, so he'll have a mark where he is in the navigation:
#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 是否有可能?
You can also examine the link: www.mayabarber.co.il Is it possible?
谢谢
推荐答案
可以.只需用以下代码替换上面的CSS代码:
Sure you can. Just replace your above CSS code with this one:
.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
这篇关于用户单击链接后，使:focus样式保留在那里的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
