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

【问题标题】：Hover effect make weird behavior on mobile devices悬停效果在移动设备上产生奇怪的行为
【发布时间】：2020-06-26 14:58:05
【问题描述】：

我有一个很奇怪的问题。所以让我们试着解释一下。我正在开发将在手机上使用的 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 浏览器进行了测试。

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

【问题讨论】：

标签： html css reactjs mobile mobile-safari

【解决方案1】：

你的猜测完全正确。悬停效果在移动设备上无法正常工作。当用户点击元素时，它会在将他们带到下一个链接之前快速触发悬停效果。有时手机会缓存触发悬停效果并使其始终以这种方式显示。除了悬停效果，您只想对移动设备使用点击效果。也许有一天我们的手机会更好地支持这一点。

【讨论】：