视口更改为移动时的链接问题

Question

在让这个Magento 2网站响应时遇到了一些问题。。。它基本上就在那里，但有两个块，其中有一个链接在更改视口或在移动设备上查看后变得不可点击

这是网站：https://typhoonairsoft.co.uk

这是代码：

<div class="banner banner-col clearfix">
<div class="banner-inner-content banner-inner-1 clearfix">
<div class="inner-wrapper">
<div class="wall-col">
<div class="category-grid-item">
<div class="category-grid-item-wrap">
<div class="category-grid-featured-wrap">
<div class="category-grid-featured" style="background-image: url(//typhoonairsoft.co.uk/images/Galery-6.jpg);">
<span class="hidden">hidden</span></div>
</div>
<div class="category-grid-featured-summary">
<div class="category-grid-featured-summary-wrap">
<h3><small>THE BEST</small> AIRSOFT GUNS</h3>
<a class="product-category-grid-btn" href="https://typhoonairsoft.co.uk/airsoft-gun.html">Shop Now</a></div>
</div>
</div>
</div>
</div>
<div class="wall-col box-ft box-ft-1">
<div class="category-grid-item">
<div class="category-grid-item-wrap">
<div class="category-grid-featured-wrap">
<div class="category-grid-featured" style="background-image: url(//typhoonairsoft.co.uk/images/00002188.png);"><span class="hidden">hidden</span></div>
</div>
<div class="category-grid-featured-summary">
<div class="category-grid-featured-summary-wrap">
<h3><small>ACCESSORIES</small> GET TACTICAL</h3>
<a class="product-category-grid-btn" href="/tactical-gear.html">Shop Now</a></div>
</div>
</div>
</div>
</div>
</div>
</div>

如有任何帮助，将不胜感激

Answer 1

您有一个::before伪元素，它覆盖了整个块，并导致链接"不可点击"，就像通过::before元素的层"不可访问"一样。

当您检查页面时，您可以看到它。看起来像：

<div class="category-grid-item-wrap">
::before
...

看看styles.css:1288，你会发现下面的css导致了::before:

.banner-inner-content .inner-wrapper .category-grid-item-wrap:before {
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 3;
}