Question

RFM细分看起来像这样https://www.putler.com/wp-content/uploads/2017/05/rfm-grid.png

我想在html中重新创建它，其中每个块代表一个片段。我尝试将其作为[1,1]块执行，但由于要创建一个悬停效果。多块需要组合在一起才能产生整体效果。

我尝试使用div进行操作，但无法创建悬停效果 https://i.imgur.com/S51lu0p.png

这是React代码

                                  <div class="rfmBox">
                <div class="flex-container">
                    <div>5</div>
                    <div style={{ backgroundColor: "#FFC9CE" }} />
                    <div style={{ backgroundColor: "#FFEDB7" }} />
                    <div style={{ backgroundColor: "#E7F7BA" }} />
                    <div style={{ backgroundColor: "#E7F7BA" }} />
                    <div style={{ backgroundColor: "#E0ECBC" }} />
                </div>
                <div class="flex-container">
                    <div>4</div>
                    <div style={{ backgroundColor: "#FFEDB7" }} />
                    <div style={{ backgroundColor: "#FFEDB7" }} />
                    <div style={{ backgroundColor: "#E7F7BA" }} />
                    <div style={{ backgroundColor: "#E7F7BA" }} />
                    <div style={{ backgroundColor: "#E7F7BA" }} />
                </div>
                <div class="flex-container">
                    <div>3</div>
                    <div style={{ backgroundColor: "#FFEDB7" }} />
                    <div style={{ backgroundColor: "#FFEDB7" }} />
                    <div style={{ backgroundColor: "#9AF4E7" }} />
                    <div style={{ backgroundColor: "#C1FFFA" }} />
                    <div style={{ backgroundColor: "#C1FFFA" }} />
                </div>
                <div class="flex-container">
                    <div>2</div>
                    <div style={{ backgroundColor: "#CFD8E4" }} />
                    <div style={{ backgroundColor: "#F1F2F4" }} />
                    <div style={{ backgroundColor: "#B9E0E7" }} />
                    <div style={{ backgroundColor: "#C1FFFA" }} />
                    <div style={{ backgroundColor: "#C1FFFA" }} />
                </div>
                <div class="flex-container">
                    <div>1</div>
                    <div style={{ backgroundColor: "#CFD8E4" }} />
                    <div style={{ backgroundColor: "#CFD8E4" }} />
                    <div style={{ backgroundColor: "#B9E0E7" }} />
                    <div style={{ backgroundColor: "#C0ECFD" }} />
                    <div style={{ backgroundColor: "#FFEEEE" }} />
                </div>

                <div class="flex-container">
                    <div />
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                    <div>4</div>
                    <div>5</div>
                </div>
            </div>

Answer 1

我认为您需要添加职位：亲戚；在div上，在悬停时使用z-index。

这是一个功能相似但非常难看的代码沙箱。 https://codesandbox.io/embed/oqwlvr7229?fontsize=14

编辑：错误地阅读了您的问题。这是一个更新。类似的解决方案，但更能反映出您的问题。

https://codesandbox.io/embed/oqwlvr7229?fontsize=14

Answer 2

使用display: grid;只能按区域创建一个<div>，然后使用grid-column和grid-row css属性按需要为每个区域放置一个。

只需添加一些position: relative和z-index就可以了！

我制作了一个Codepen，尝试在其中执行与您想要的相同的操作：https://codepen.io/loic/pen/ZZePXd

（我确实设置了任何React代码，因为我仅使用html和css解决了您的问题）。

希望能成功；）

创建自定义形状的<div>以设计RFM细分

2 个答案: