Iphone/手机上的悬停效果

如何解决Iphone/手机上的悬停效果

我已经创建了一个带有 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;