ブートストラップのメディアを小さく、小さくしたり小さくしたりすると、クリックハンドラが機能しなくなり、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：私は縮小したときに別のdivが私の#examineIconと#pricetagのdivを覆った

#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を削除したことでした。