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

Question

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

在 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>