css 链接焦点在移动设备中不起作用

Question

我正在创建一个WordPress聊天气泡插件。我正在使用纯 css 代码来打开和关闭浮动操作弹出框。

我正在使用链接焦点 css。它在桌面上工作正常，但在移动设备或响应式视图上不起作用。

function devsol_chat_buttons()
{
wp_register_style('dvchat-styles', plugins_url('/css/dvchat.css',__FILE__ ));
wp_enqueue_style('dvchat-styles');  
?>    
<div class="devsol-chat">
<a href="javascript:void(0);" class="float" id="menu-close">
<img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/close.svg'; ?>">     
</a>
<a href="javascript:void(0);" class="float" id="menu-share">
<img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/chat.svg'; ?>">
</a>        
<ul>
<li><a href="mailto:[e-mail]" id="menu-email">
<img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/email.svg'; ?>">
</a></li>   
<li><a href="tel:[phone]" id="menu-call">
<img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/call.svg'; ?>">
</a></li>   
<li><a href="https://m.me/Printed.Mobile.Covers" id="menu-facebook">
<img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/facebook.svg'; ?>">
</a></li>
<li><a href="https://wa.me/9203038518000" id="menu-whatsapp">
<img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/whatsapp.svg'; ?>">
</a></li>
</ul>
</div>
<?php   
return;
}

.devsol-chat .float{
position:fixed;
width:50px;
height:50px;
bottom:30px;
right:30px;
color:#FFF;
border-radius:50px;
text-align:center;
z-index:1000;
}
.devsol-chat ul{
position:fixed;
right:30px;
padding-bottom:20px;
bottom:50px;
z-index:100;
}
.devsol-chat ul:hover{
visibility:visible!important;
opacity:1!important;
}
.devsol-chat ul li {
list-style:none;
margin-bottom:10px;
}
.devsol-chat ul li a{
color:#FFF;
border-radius:50px;
text-align:center;
box-shadow: 2px 2px 3px #999;
width:50px;
height:50px;
display:block;
}
#menu-share {
background-color: #000000;
box-shadow: 2px 2px 3px #999;
}
#menu-share img {
width: 30px;
margin-top: 10px;
}
#menu-close {
background-color: #000000;
box-shadow: 2px 2px 3px #999;
}
#menu-close img {
width: 15px;
margin-top: 17px;
}
#menu-facebook {
background-color: #0084ff;
}
#menu-facebook img {
width: 30px;
margin-top: 10px;
}
#menu-whatsapp {
background-color: #4dc247;
}
#menu-whatsapp img {
width: 30px;
margin-top: 10px;
}
#menu-call {
background-color: #f37b2b;
}
#menu-call img {
width: 30px;
margin-top: 10px;
}
#menu-email {
background-color: #f37b2b;
}
#menu-email img {
width: 30px;
margin-top: 10px;
}
.my-float{
font-size:24px;
margin-top:18px;
}
a#menu-share i{
animation: rotate-in 0.5s;
}
a#menu-share:hover > i{
animation: rotate-out 0.5s;
}
a#menu-share + ul {
visibility: hidden;
}
a#menu-share:focus + ul {
visibility: visible;
animation: scale-in 0.5s;
}
a#menu-share:focus::after {
content: 'X';
font-weight: bold;
font-size: 16px;
top: 10px;
position: relative;
}
a#menu-share:focus {
display: none;
}

我还注意到：focus仅适用于桌面和移动设备的Firefox浏览器。焦点在 chrome 桌面和移动浏览器中不起作用。请帮忙

Answer 1

你试过 ：active 而不是 ：focus 吗？