如何在 4 列网格中显示卡片？答案

【问题标题】：How to display cards in a 4 column grid?如何在 4 列网格中显示卡片？
【发布时间】：2020-05-19 08:46:18
【问题描述】：

我正在尝试在网格中显示 4 张类似的卡片。我可以创建列，但卡片操作仅适用于第一个。（点击后，会出现一个带有“查看详细信息”按钮和有关产品的进一步描述的覆盖图）。
将鼠标悬停在其他 3 张卡片上时，没有任何反应。只有第一个有效。

    <div class="container_grid">
        <div class="row">
            <div class="col-3">
            <div id="product-card" style="margin: 1rem">
                <div id="product-front">
                    <div class="shadow"></div>
                    <img src="https://veenaazmanov.com/wp-content/uploads/2019/08/Chocolate-Birthday-Cake5-500x500.jpg" alt="" />
                    <div class="image_overlay"></div>
                    <div id="view_details">View details</div>
                    <div class="stats">         
                        <div class="stats-container">
                            <span class="product_price">Ksh.500</span>
                            <span class="product_name">Chocolate Cake</span>    
                            <p>Tasty cake</p>                                            

                            <div class="product-options">
                            <strong>Available in</strong>
                            <span>1kg, 2kg, 3kg, 4kg, 5kg</span>
                            <button class="btn">Add To Cart</button>
                             <!-- <div class="cart_btn"><p>Add to Cart</p></div> -->
                        </div>                       
                        </div>                         
                    </div>
                </div>

            </div>
        </div>
        <div class="col-3">
            <div id="product-card" style="margin: 1rem">
                <div id="product-front">
                    <div class="shadow"></div>
                    <img src="https://veenaazmanov.com/wp-content/uploads/2019/08/Chocolate-Birthday-Cake5-500x500.jpg" alt="" />
                    <div class="image_overlay"></div>
                    <div id="view_details">View details</div>
                    <div class="stats">         
                        <div class="stats-container">
                            <span class="product_price">Ksh.500</span>
                            <span class="product_name">Chocolate Cake</span>    
                            <p>Tasty cake</p>                                            

                            <div class="product-options">
                            <strong>Available in</strong>
                            <span>1kg, 2kg, 3kg, 4kg, 5kg</span>
                            <button class="btn">Add To Cart</button>
                             <!-- <div class="cart_btn"><p>Add to Cart</p></div> -->
                        </div>                       
                        </div>                         
                    </div>
                </div>

            </div>
            </div>            
        </div>
    </div>

可能是什么问题？
链接到完整的 JFiddle https://jsfiddle.net/5yoerguh/1/

【问题讨论】：

id 属性的值应该是唯一的。你应该在这里使用class。

标签： html css css-position css-grid

【解决方案1】：

问题是你用id作为div，需要改成class

或者使用这个选择器$('.col-3 > div').hover(function(){}

https://jsfiddle.net/viethien/2nesgtLy/1/

【讨论】：