html - 悬停效果在移动设备上产生奇怪的行为

问题描述

我有一个很奇怪的问题。所以让我们试着解释一下。我正在开发将在手机上使用的 Web 应用程序。一切都很顺利，但我遇到了一个非常讨厌的问题。该应用程序很简单，我们有一个欢迎屏幕，您可以在其中点击名为 Get Strad 的按钮（靠近屏幕中间），单击此按钮后应用程序切换到以 2x2 网格列出产品的页面。每个产品都有悬停效果，模糊图像并显示名称和价格。所以我希望到目前为止一切都听起来不错？当用户单击“开始”并且之后的页面呈现自动具有与“悬停”按钮位于同一位置的项目时会出现问题，这看起来很奇怪，因为您不会看到任何预先选择的项目。

第一步：当用户单击“开始”按钮时的主欢迎屏幕：

第二步：用户点击开始并进入产品列表，其中一项标记为选中/点击，因为悬停效果

这是 html/css，只是添加模糊和显示产品名称和价格的常规悬停效果：

<ul className="list-products">
    {productsStore.menuProducts.filter(p => p.sectionId == productsStore.activeSectionId).map((product, index) => {
        return (
            <li key={index} onClick={() => handleOnProductClick(product.id)}>
                <button>
                    <small style={{ backgroundImage: "url(" + getDefaultImage(product.image) + ")" }}></small>
                    <strong id={product.id}>
                        <span>
                            {product.name}
                            <em>{product.price.toFixed(2)}</em>
                        </span>
                    </strong>
                </button>
            </li>
        )
    })}
</ul>

.list-products { display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; }
.list-products li { width: 50%; position: relative; padding-bottom: 50%; border-bottom: 1px solid #252525; }
.list-products li:nth-child(odd) { border-right: 1px solid #252525; }
.list-products li button { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; border: 0; border-radius: 0; }
.list-products li button strong { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-weight: 400; background: rgba(0,0,0,.3); opacity: 0; }
.list-products li button:hover strong { opacity: 1; }
.list-products li button strong { display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: flex-end; justify-content: center; padding: 10px; }
.list-products li button span { display: inline-block; font-size: 18px; text-align: left; width: 100% }
.list-products li button span em { font-style: normal; display: block; }
.list-products li button small { background-size: cover; background-position: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.list-products li button:hover small { filter: blur(2px); -webkit-filter: blur(2px); }

我忘了提到我正在使用 React。即使启用了移动视图，这种行为也无法在 PC 上重现。只能在移动设备上使用，我已经在 iphone 上使用 safari 浏览器对其进行了测试。

我认为正在发生的事情：由于我们在移动设备上，当用户单击屏幕上的某个位置并直到用户单击另一个位置时，悬停效果触发，悬停保持在那里，并且由于我们单击“开始”（按钮的右侧），浏览器认为我们悬停在那里，这就是为什么它显示为悬停？但是现在这里的解决方案是什么？

标签： htmlcssreactjsmobilemobile-safari

html - 悬停效果在移动设备上产生奇怪的行为

问题描述

解决方案

推荐阅读