css 过渡不适用于 css 网格列和网格行属性？

Question

我想在鼠标悬停在项目上时添加一个过渡。我尝试使用 CSS 转换属性但它不起作用。我的代码很简单，我想做的是，我有四个方块，当悬停其中一个时，我应该覆盖其他三个并获取所有四个方块的大小。
（例如：对于投资组合）

检查下面的代码我发现使用 css 网格布局很容易，但我是 css 网格的新手。有人可以告诉我的代码有什么问题或替代方法来做我的 task.thank 你

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Portfolio test</title>
        <style>
            *{
                padding: 0;
                margin: 0;
                text-decoration: none;

            }
            #cover {
                display: grid;
                height: 100vh;
                grid-template-columns: repeat(4,1fr);
                grid-template-rows: 100px auto auto 100px;
                grid-gap: 5px;
                grid-template-areas: 
                ". . . ."
                ". item_1 item_2 ."
                ". item_3 item_4 ."
                ". . . ."
            }
            .item {
                transition: all 5s ease;
                text-align: center;
                vertical-align: middle;
                font-size: 5em;
            }

            .item:nth-child(1) {
                grid-area: item_1;
                background-color: aqua
            }
            .item:nth-child(2) {
                grid-area: item_2;
                background-color: gray;
            }
            .item:nth-child(3) {
                grid-area: item_3;
                background-color: lightgreen;
            }
            .item:nth-child(4) {
                grid-area: item_4;
                background-color: lightsalmon;
            }

           .item:hover {

               grid-column: 2 / 4;
               grid-row: 2 / 4;
               /* width: 200%; */
               z-index: 1000;

            }
        </style>
    </head>
    <body>
        <div id="cover">
            <div class="item">One</div>
            <div class="item">Two</div>
            <div class="item">Three</div>
            <div class="item">Four</div>
        </div>
    </body>
    </html>

Answer 1

我为您的项目添加了宽度。然后对于项目悬停，我添加了一个宽度、高度、绝对位置、过渡和一个使其居中的边距。悬停时，我们使容器覆盖所有 4 个容器的宽度。

CSS

<style type="text/css">
*{
padding: 0;
margin: 0;
text-decoration: none;
}
#cover {
display: grid;
height: 100vh;
grid-template-columns: repeat(4,1fr);
grid-template-rows: 100px auto auto 100px;
grid-gap: 5px;
grid-template-areas: 
". . . ."
". item_1 item_2 ."
". item_3 item_4 ."
". . . ."
}
.item {
width:100%;
text-align: center;
vertical-align: middle;
font-size: 5em;
}

.item:nth-child(1) {
grid-area: item_1;
width:80%;
background-color: aqua;
transition:ease-in-out 1s;
margin-left:10%;
}
.item:nth-child(2) {
grid-area: item_2;
background-color: gray;
transition:ease-in-out 1s;
width:80%;
margin-left:10%;
}
.item:nth-child(3) {
grid-area: item_3;
background-color: lightgreen;
transition:ease-in-out 1s;
width:80%;
margin-left:10%;
}
.item:nth-child(4) {
grid-area: item_4;
background-color: lightsalmon;
transition:ease-in-out 1s;
width:80%;
margin-left:10%;
}

.item:hover {
grid-column: 2 / 4;
grid-row: 2 / 4;
width:80%;
height:80%;
position:absolute;
top: 0px;
z-index: 1000;
transition:ease-in-out 1s;
margin-left:10%;
opacity:0.7;
}
</style>

HTML

<body>
<div id="cover">
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
<div class="item">Four</div>
</div>
</body>

注意不透明度是他们的，所以你可以看到行为。您可以删除它以摆脱容器的透明度。希望能帮助到你。

css 过渡不适用于 css 网格列和网格行属性？

css transitions not working for css grid-column and grid-row properties?

html

css

css-transitions

css-grid