如何在 React 中调整覆盖卡与其底卡相同的大小和位置？答案

【问题标题】：How to adjust the overlay card same size and position as its bottom card in React?如何在 React 中调整覆盖卡与其底卡相同的大小和位置？
【发布时间】：2023-01-05 22:31:44
【问题描述】：

我想在scss中制作悬停动画效果。这个想法是当光标悬停在卡片上时，另一张隐藏的卡片出现在悬停卡片的顶部。

但是现在我陷入了制作隐藏卡片 scss 的困境：我不确定如何使卡片与底部卡片（深蓝色卡片）具有相同的大小和相同的位置。这是为了类名“卡悬停”

下面是js的代码：

<div className="gallery">
  
            {data.map((item)=>
              <div className="card-holder" key={item.id}>
                <div className="card-head">
                  <img className="card-img" src={item.image} alt="project item" />

                </div>
                  <div className="card-body">
                    <h2 className="item-name">{item.title}</h2>
                    <div className="item-date">{item.year}</div>
                  </div>

                <div className="card-hover">
                  <div className="item-role">{item.role}</div>
                  <div className="item-type">{item.type}</div>
                  <div className="item-decs">{item.desc}</div>
                </div>
              </div>
  
            )}


 </div>

scs的代码：

.gallery{
    margin-left: 10rem;
    margin-right: 10rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 8px;
    justify-content: center;
}

.card-holder{
    border-radius: 4px;
    margin-top: 1rem;
    background-color: $darkBlue;
    box-shadow: 0px 8px 56px rgb(15 80 100 / 16%);

}

.card-hover {
    position: absolute;
    background-color: #D62839;
    display: inline;
    width: 100%;
    height: 100%;
}

目前的结果： enter image description here

我已经看过关于如何制作这种悬停效果的教程视频，但到目前为止所有的解决方案都是设置

width:100%;
height:100%

或者

top:0;
bottom:0;
left:0;
right:0;

然而，当我尝试它们时，结果就像上面的截图一样。有人可以帮我弄这个吗？谢谢

【问题讨论】：

标签： reactjs sass hover css-animations

【解决方案1】：

React中要调整覆盖卡片的大小和位置，使其与底部卡片相同，可以使用CSS样式设置覆盖卡片的高度和宽度与底部卡片的高度和宽度相匹配，并使用绝对定位将覆盖卡放置在底部卡的顶部。

这是您如何执行此操作的示例：

import React from 'react';

const OverlayCard = ({ bottomCard }) => {
  return (
    <div
      className="overlay-card"
      style={{
        height: `${bottomCard.offsetHeight}px`,
        width: `${bottomCard.offsetWidth}px`,
        top: `${bottomCard.offsetTop}px`,
        left: `${bottomCard.offsetLeft}px`,
        position: 'absolute',
      }}
    >
      {/* Overlay card content goes here */}
    </div>
  );
};

export default OverlayCard;

在此示例中，高度、宽度、顶部和左侧样式用于将叠加卡片的大小和位置与底部卡片的大小和位置相匹配。位置样式设置为“绝对”以确保覆盖卡位于底部卡的顶部。

请记住，这只是实现此效果的一种方法，您还可以采用许多其他方法。

我没有准确地理解你的代码和图像，但如果你向我提供更多关于它的上下文，也许我可以帮助你。

我会继续看这篇文章，也许会更正确地回答你，因为对我来说仍然不清楚。

【讨论】：