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

Question

我有一个代表产品的反应成分。 用户单击产品时，将通过称为“ 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;
}

Answer 1

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