Question

我的顶部栏中有一个滑动菜单，一个徽标和一个搜索元素。不幸的是，我无法弄清楚如何使它们同时在我的平板电脑和移动设备响应中都可单击。由于z索引，我认为它们是堆叠的/透明的-这就是问题所在。我只能使菜单+搜索可点击或徽标。我尝试将它们更改为在每个元素上内联块，尝试了pointer-events属性，还围绕z-index值进行了更改，但是没有成功。我该如何解决？

您可以在这里查看我的网站：www.rachelclayton.co

CSS：

@media only screen and (max-width: 767px) {
    #top-bar-logo {
    text-align: center;
    position: absolute;
}}

@media only screen and (max-width: 941px) {

#top-bar-logo {
    display: block;
}   
#top-bar-logo img {
    max-width:60%;
    height:auto;
}
#mobile-social {
    display: none;
}
    #top-bar {
    height:40px;
    position:relative;
    line-height:40px;
    background:#ffff;
    z-index:99999;
}}

@media only screen and (max-width: 490px) {
#header {
    padding-top: 10px;
    padding-bottom: 10px;
}
#top-bar {
    height:35px;
    position:relative;
    line-height:35px;
    background:#ffff;
    z-index:99999;
}
#top-bar-logo img {
    max-width:70%;
    height:auto;
}
#top-bar-logo {
    display: inline-block;
}}

Answer 1

我很难理解这篇文章。

“当我将其移至顶部栏时，它变得不可单击”是什么意思？什么是“向上移动”中的“它”？

我发现您在您的网站中将<img>用<a>包裹-很好。

  <a href="https://rachelclayton.co/"><img src="https://rachelclayton.co/wp-content/uploads/2019/05/RClogo.png" alt="Rachel Clayton" /></a>

您是否也尝试过将<div id="top-bar-logo">包装在<a>标记中？

如何在响应中使顶部栏元素可单击？

1 个答案: