删除在手机屏幕图像链接(Remove image link in mobile screen)

我有我的桌面网站的主题可点击图片这表明在移动屏幕上。 我已经成功地删除下面的代码的图像，但它留下了一个“鬼”链接，用户看不到，但如果碰到他们带到所链接的页面：

在footer.tpl

<div id="footer">
<div class="column">

<a href="http://mywebsite.com/delivery" id="test"></a> 

在stylesheet.css中

#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;

有没有什么办法的链接也被删除？ 提前致谢。

Answer 1:

给你的元素的display:none; 在媒体查询。

 #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; } } 

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

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"...和使用.test在你的CSS文件，而不是，这样就可以重用班级多次。

文章来源: Remove image link in mobile screen