Question

在我的网站上，我无法将页脚上的TripAdvisor小部件链接到页面。如果单击它将不会注册。

有人可以解释为什么会这样吗？

这是小部件的html和css：

<div class="tripAdvisorFooter">
  <a target="_blank" href="https://www.tripadvisor.co.uk/Hotel_Review-g3801136-d11918090-Reviews-Timber_Trail_Lodge-Pureora_Forest_Park_Manawatu_Wanganui_Region_North_Island.html">
    <picture>
      <source media="(max-width: 500px)" srcset="https://www.tripadvisor.co.nz/img/cdsi/img2/badges/ollie-11424-2.gif">
      <img src="https://www.tripadvisor.co.uk/img/cdsi/img2/branding/tripadvisor_logo_transp_340x80-18034-2.png">
    </picture>
  </a>
</div>

   .tripAdvisorFooter {
        position: absolute;
        left: 180px;
      }
   .tripAdvisorFooter a {
        z-index: 1;
    }
   @media only screen and (max-width: 500px) {      
    .tripAdvisorFooter { 
      top: 80px;
      left: 30px;
    }
  }

如果您查看其他小部件，您可以看到他们使用几乎完全相同的代码但是可以点击。

另外，如果有用的话，我正在使用Wordpress。如果这改变了什么，请告诉我。

Answer 1

快速修复，在类tripAdvisorFooter中添加z-index。像

这样的东西

.tripAdvisorFooter {
   z-index: 999;
}

由于此类设置为绝对位置，因此右侧的链接跨越上方并一直向左，并且由于它位于上方，因此您无法单击tripadvisor链接。

嵌入在我的div中的链接不可点击

1 个答案: