时间戳

首页 > 解决方案 > 如何在 4 列网格中显示卡片？

html - 如何在 4 列网格中显示卡片？

问题描述

我正在尝试在网格中显示 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/

标签： htmlcsscss-positioncss-grid

解决方案

问题是您id用于 div，需要将其更改为class

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

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

推荐阅读