html - Css链接焦点在移动设备中不起作用
问题描述
我正在创建一个 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:hello@covers.pk" id="menu-email">
<img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/email.svg'; ?>">
</a></li>
<li><a href="tel:+923038518000" 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 桌面和移动浏览器中不起作用。请帮忙
解决方案
您是否尝试过 :active 而不是 :focus ?
推荐阅读
- javascript - 停止在浏览器上长时间运行的 javascript 函数
- javascript - 如何检查我的变量是一个字还是两个字长
- sql - DB引擎如何决定JOIN操作的查询计划?
- java - 解析 application.yml
- php - 在网络服务器上分发 APK
- discord - 如何检查文本频道的权限值?[不和谐.py]
- swiftui - 如何将点击手势识别器添加到 SecureField 以使识别器的点击区域与字段的默认点击识别器相同?
- c# - 无法解析请求正文。确保请求正文与指定的内容类型匹配:application/json
- java - java中的扫描仪输入不起作用
- python - 在 Python 中的实例之间循环进行操作