Question

我的桌面网站主题上有一个可点击的图片，显示在移动设备屏幕上。我已设法使用以下代码删除图像，但它留下了一个“幽灵”链接，用户看不到，但如果触摸它会将它们带到链接页面：

在footer.tpl

#test {

  @media screen and (max-width: 480px) { image display: none; }   

  background-image: url('../image/myimage.png');
  background-repeat: no-repeat;
  position: absolute;
  margin-top: 10px;
  margin-left: 20px; 
  width: 75px;
  height: 75px;

在stylesheet.css中

{{1}}

链接是否也可以删除？提前谢谢。

Answer 1

在媒体查询中为您的元素添加display:none;。

＆＃13;

#test {
  display: block;
  background-image: url('../image/myimage.png');
  background-repeat: no-repeat;
  position: absolute;
  margin-top: 10px;
  margin-left: 20px; 
  width: 75px;
  height: 75px;
  background: whitesmoke; /** Testing purposes **/
}

@media all and (max-width: 480px) {
    .hide {
      display: none;
    }
}

＆＃13;

<div id="footer">
<div class="column">
<a href="http://mywebsite.com/delivery" id="test" class="hide"></a>

＆＃13;

Answer 2

您的CSS似乎没有正确形成。尝试使用以下内容替换您的媒体查询，通过ID选择和隐藏您的链接：

@media screen and (max-width: 480px) {
    #test {
        display: none;
    }
}

Answer 3

现在您的媒体查询看起来无效。

要隐藏链接，您可以这样做：

@media screen and (max-width: 480px) {
  #test { 
    display: none;
  }
}

请注意，这将覆盖 display元素的#test样式。

建议：您可能希望改为使用css类，例如<a class="hidden-mobile"...并在css文件中使用.test，以便您可以多次重复使用该类。

删除手机屏幕中的图片链接

3 个答案: