当我将屏幕尺寸缩小到Bootstrap's中、小或超小，我的点击处理程序停止工作，css悬停属性也停止工作

When I shrink my screen size down to a Bootstrap's medium, small, or extra small, my click handlers stop working and so does the css hover property

本文关键字：停止工作 我的 程序 属性 悬停 css 处理 缩小 屏幕 Bootstrap      更新时间：2023-09-26

我有一个表示产品的react组件。当用户单击产品时，它会通过名为"handleAddProduct"的单击处理程序添加到购物车中。出于某种神秘的原因，当我将屏幕缩小到某个像素数（任何小于引导col-lg的像素数）时，这个点击处理程序就会完全停止工作，将鼠标变成指针的悬停属性也会完全停止工作。我做这个项目已经好几个月了，不知道这是怎么神奇地开始的。关于为什么点击处理程序和css停止运行，有什么想法吗？我将发布组件，它的css如下：

产品组成：

class SingleProduct extends Component {
    constructor(props) {
        super(props);
        this.handleAddProduct = this.handleAddProduct.bind(this);
    }
    handleAddProduct() {
        this.props.addToCart(this.props.product);
        this.props.calculateCartTotals();
    }
    render() {
        const { product, showReceipt } = this.props;
        return (
            <div id="singleProduct" className="wow flipInY">
                <div className="row">
                    <div id="examineIcon" className="col-lg-12 col-md-12">
                        <Link to={`/productProfile/${product._id}`}><i className="fa fa-arrows-alt"></i></Link>
                    </div>
                    {/* May want to turn product's symbol into a component that returns its value
                        based on product.category */}
                    <div id="pricetag" className="col-lg-12 col-md-12">
                        <i className={`${product.category === 'pharmaceutical' ? 'fa fa-flask fa-4x' : 'fa fa-leaf fa-4x'}`} onClick={showReceipt ? null : this.handleAddProduct}></i>
                    </div>
                    <div className="col-lg-12 col-md-12">
                        <p id="productName" className="bold">{product.name}</p>
                    </div>
                </div>
            </div>
        );
    }
}

组件对应的CSS:

#singleProduct {
    border: 2.5px solid #284A75;
    border-radius: 5px;
    width: 100px;
    height: 140px;
    margin-top: 10px;
}
#pricetag i {
    padding-left: 25px;
    color: #1EBEA5;
}
#pricetag i:hover {
    cursor: pointer;
    color: #2C87F3;
}
#productName {
  text-align: center;
  color: #284A75;
}
#examineIcon i {
   padding: 5px 0 0 5px;
   color: #284A75;
}
#examineIcon i:hover {
    color: #2C87F3;
}

当我缩小屏幕时，另一个div正在覆盖我的#exacteIcon和#pricetagdiv。我需要做的是删除覆盖我的点击目标的div，它解决了这个问题。

相关文章：