如何使用CSS转换size(),但要使元素在悬停时浮动在其他HTML元素上

qv7cva1a  于 2023-03-20  发布在  其他
关注(0)|答案(1)|浏览(126)

所以我想做的基本上是下面的图像。我想使悬停时的div元素调整大小,并在所有其他元素之上,而不移动它们。

我想象中的代码:

div {
    display: flex;
}

div .childDivs {
    width: 15rem;
    height: 15rem;
}

div .childDivs:hover {
    transform: scale(1.01);
}
<div>
    <div class="childDivs"></div>
    <div class="childDivs"></div>
    <div class="childDivs"></div>
    <div class="childDivs"></div>
    <div class="childDivs"></div>
    <div class="childDivs"></div>
    <div class="childDivs"></div>
</div>
krcsximq

krcsximq1#

你已经很接近了,你的比例需要大于1.01,虽然,这是一个很小的增加,很难发现。

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 2em;
}

.cards>div {
    width: 5rem;
    height: 5rem;
    background: cyan;
    border-radius: 1rem;
    transition: 0.2s;
}

.cards>div:hover {
    transform: scale(1.5);
    background: pink;
}
<div class="cards">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

相关问题