當我將屏幕尺寸縮小到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，它解決了該問題。