Html 在手机上点击社交图标不会发生任何事情
我在我的网站上创建了一些社交媒体图标。我的链接在桌面上运行良好,但在移动浏览器中点击它们时没有任何效果。这是网站,这是代码-Html 在手机上点击社交图标不会发生任何事情,html,css,responsive-design,mobile-website,weebly,Html,Css,Responsive Design,Mobile Website,Weebly,我在我的网站上创建了一些社交媒体图标。我的链接在桌面上运行良好,但在移动浏览器中点击它们时没有任何效果。这是网站,这是代码- <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=&qu
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
padding: 10px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none!important;
margin: 5px 2px;
border-radius:50%;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-telegram {
background: #30a2e7;
color: white;
}
.fa:hover {
opacity: 0.7;
}
</style>
</head>
<body>
<!-- Add font awesome icons -->
<a href="https://www.facebook.com/TheOpenBay" target="_blank" class="fa fa-facebook"></a>
<a href="https://t.me/TheOpenBay" target="_blank" class="fa fa-telegram"></a>
</body>
</html>
法兰西{
填充:10px;
字体大小:30px;
宽度:30px;
文本对齐:居中;
文字装饰:无!重要;
保证金:5px2px;
边界半径:50%;
}
.fa脸谱网{
背景:#3B5998;
颜色:白色;
}
.fa电报{
背景:#30a2e7;
颜色:白色;
}
.fa:悬停{
不透明度:0.7;
}
欢迎来到SO。我发现了问题。图标被“navmobile”元素阻止。它覆盖了图标,因此无法“按下”图标
这是由该元素的显示块样式造成的。因此,通过删除这些图标,您将能够再次单击这些图标
您的问题是,div#navmobile与您的页脚重叠,#navmobile有z-index:8,您可以做的是,您可以将div#my-footer的位置更改为相对,z-index高于8,下面是代码(您应该添加到css中):
我通过将
display:block
更改为display:table
解决了这个问题,从而降低了导航手机的高度
上下文:上面是Iliass Nassibane发布的图像。我尝试过,但没有成功。请将div上的阶梯与这些类一起使用:嘿,谢谢你的帮助,我通过将display:block更改为display:table解决了这个问题,这降低了navmobile的高度。很高兴你发现了这个问题!但是,当我删除显示块样式时,导航内容也将被删除。您好,也许您可以使导航显示:仅在激活时才阻塞。这样就不会阻止你的应用程序上的进一步交互。我该怎么做?嘿,谢谢你的帮助,我通过将display:block更改为display:table解决了这个问题,这降低了navmobile的高度。干得好,巴德!
#my-footer{position:relative; z-index:99}