在移动屏幕中移除图片链接 [英] Remove image link in mobile screen

问题描述

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

I have a clickable image on my desktop website theme which showed on mobile screens. I’ve managed to remove the image with the following code but it has left a ‘ghost’ link which users don’t see but if touched takes them to the linked page:

In footer.tpl

In footer.tpl

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

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

在stylesheet.css中

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

有没有办法链接也可以删除？提前感谢。

Is there any way the link could also be removed? Thanks in advance.

推荐答案

为您的元素添加 display：none; 对媒体查询。

Give your element a display:none; on the media query.

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

这篇关于在移动屏幕中移除图片链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！