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，您会发现以下引起::before的CSS：

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

视口上的链接问题变为移动设备

1 个答案: