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

Question

我有一个代表产品的反应组件。当用户点击产品时，它会通过名为 "handleAddProduct" 的点击处理程序添加到购物车。出于某种神秘的原因，当我将屏幕缩小到超过某个像素数（任何小于 bootstrap col-lg 的像素）时，此点击处理程序将完全停止工作，悬停 属性 也会将鼠标变成一个指针。我已经有这个项目好几个月了，不知道这怎么会神奇地开始发生。关于为什么点击处理程序和 css 停止运行的任何想法？我将 post 组件，它在下面 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;
}

Answer 1

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