CSS过渡不适用于CSS网格列和网格行性能

我想在鼠标徘徊时添加过渡。我尝试使用CSS过渡属性，但剂量不起作用。我的代码很简单，我想做的是，当悬停在其中一个时，我应该覆盖其他三个正方形并占用所有四个正方形的大小。
(例如：用于投资组合(

在下面检查我的代码，我发现使用CSS网格布局很容易，但我是CSS网格的新手。有人可以告诉我的代码或替代方法是怎么做我的任务。谢谢

<!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>

我为您的物品添加了一个宽度。然后，对于悬停的项目，我添加了宽度，高度，位置绝对，过渡和边距将其居中。在悬停的情况下，我们使容器覆盖了所有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>

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

相关内容

最新更新

热门标签：