问题描述
我已经创建了一个带有 react 的 web 前端,它在悬停在图像上时使用悬停效果,并且注意到当在手机上使用它时,特别是 Iphone 11,我必须在元素外按下然后按下元素以使悬停效果起作用。对于使用悬停效果的手机/iphone,这是正常现象,还是有办法解决?
主页.jsx
<HomeProductCard
productImg={HOFBbadge}
productTitle="HOFB Badge"
productPrice="4.99"
imgWidth={288.54}
imgHeight={400}
hoveredItem={hoveredItem}
setHoveredItem={setHoveredItem}
itemNumber={1}
buttonLink={'/products/hofbbadge'}
currentUrl={props.currentUrl}
setCurrentUrl={props.setCurrentUrl}
/>
HomeProductCard.jsx
import React from 'react';
import styles from './HomeProductCard.module.css';
//Import components
import Button from '../Button';
function HomeProductCard(props) {
return (
<div className={styles.default}>
<div
className={`${styles.imageCardDefault}`}
onMouseEnter={() => {
props.setHoveredItem(props.itemNumber);
}}
onMouseLeave={() => {
props.setHoveredItem(0);
}}
>
<div
className={`${
props.hoveredItem === props.itemNumber ? styles.hovered : ''
}`}
></div>
<img
className={`${
props.hoveredItem === props.itemNumber ? '' : styles.image
}`}
src={props.productImg}
width={props.imgWidth}
height={props.imgHeight}
/>
<Button
className={styles.buttonHover}
buttonText="Add To Cart"
buttonLink={props.buttonLink}
display={props.hoveredItem === props.itemNumber}
onClick={() => {
props.setCurrentUrl(props.buttonLink);
}}
/>
</div>
<div className={styles.productTitle}>{props.productTitle}</div>
{props.salePrice ? (
<div className={styles.withSalePrice}>
<span
className={`${styles.productPrice} ${styles.productPriceStrike}`}
>
CAD$ {props.productPrice}
</span>
<span className={styles.salePrice}>CAD$ {props.salePrice}</span>
</div>
) : (
<div className={styles.productPrice}>CAD$ {props.productPrice}</div>
)}
</div>
);
}
export default HomeProductCard;
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)