悬停效果使移动设备上出现奇怪的行为
Hover effect make weird behavior on mobile devices
我有一个很奇怪的问题。所以让我们试着解释你。我正在开发将在手机上使用的网络应用程序。一切进展顺利，但我遇到了一个非常讨厌的问题。该应用程序很简单，我们有欢迎屏幕，您只需点击名为 Get Strated 的按钮（靠近屏幕中间），单击此按钮后应用程序切换到在 2x2 网格中列出产品的页面。每个产品都有悬停效果，模糊图像并显示名称和价格。所以我希望到目前为止一切都听起来不错？当用户单击开始时出现问题，然后页面自动呈现与按钮 'hovered' 位于同一位置的项目，这看起来很奇怪，因为您不会看到任何预选的项目。
第一步：
用户单击 开始使用 按钮时的主欢迎屏幕：
第二步：用户点击了开始使用并转到产品列表，其中一项标记为selected/clicked，因为悬停效果[=34] =]
这是 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 浏览器对其进行了测试。
我认为正在发生的事情：因为我们在移动设备上，当用户点击屏幕上的某个地方时会触发悬停效果，直到用户点击另一个地方，悬停会一直停留在那里，因为我们点击了开始（右侧按钮），浏览器认为我们悬停在那里，这就是为什么它显示为悬停？但是现在这里的解决方案是什么？
你的猜测完全正确。悬停效果在移动设备上无法正常工作。当用户单击该元素时，它会在将它们带到下一个 link 之前快速触发悬停效果。有时手机会缓存触发悬停效果并使其始终以这种方式显示。您只想使用移动设备的点击效果，而不是悬停效果。也许有一天我们的手机会更好地支持这一点。
我有一个很奇怪的问题。所以让我们试着解释你。我正在开发将在手机上使用的网络应用程序。一切进展顺利，但我遇到了一个非常讨厌的问题。该应用程序很简单，我们有欢迎屏幕，您只需点击名为 Get Strated 的按钮（靠近屏幕中间），单击此按钮后应用程序切换到在 2x2 网格中列出产品的页面。每个产品都有悬停效果，模糊图像并显示名称和价格。所以我希望到目前为止一切都听起来不错？当用户单击开始时出现问题，然后页面自动呈现与按钮 'hovered' 位于同一位置的项目，这看起来很奇怪，因为您不会看到任何预选的项目。
第一步： 用户单击 开始使用 按钮时的主欢迎屏幕：
第二步：用户点击了开始使用并转到产品列表，其中一项标记为selected/clicked，因为悬停效果[=34] =]
这是 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 浏览器对其进行了测试。
我认为正在发生的事情：因为我们在移动设备上，当用户点击屏幕上的某个地方时会触发悬停效果，直到用户点击另一个地方，悬停会一直停留在那里，因为我们点击了开始（右侧按钮），浏览器认为我们悬停在那里，这就是为什么它显示为悬停？但是现在这里的解决方案是什么？
你的猜测完全正确。悬停效果在移动设备上无法正常工作。当用户单击该元素时，它会在将它们带到下一个 link 之前快速触发悬停效果。有时手机会缓存触发悬停效果并使其始终以这种方式显示。您只想使用移动设备的点击效果，而不是悬停效果。也许有一天我们的手机会更好地支持这一点。