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

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

关于html - css 转换不适用于 css 网格列和网格行属性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48758493/

上一篇：html - 托管在 Amazon S3 上的站点不显示 Favicon

下一篇：html - 如何在 css 中存储最后一个计数器值并在 html 中显示为内容？

相关文章：

php - 每次我发送表单时都会清除数组

c# - body 最大高度；纵横比；飞涨

twitter-bootstrap - 生涩的扩展子菜单动画

javascript - 滚动后带有过渡效果的导航栏显示

php - 如何屏蔽 URL 中的扩展名

html - 防止 iOS 上的溢出/橡皮筋滚动

jquery - 根据设备尺寸的高度宽度 - Bootstrap

html - 我应该在 link 元素或其子元素 img 元素上使用 CSS transform 属性吗？

javascript - 显示某些页面时强制向左(导航)框架

css - 为什么页脚在 Internet Explorer 8 和 11 中显示不正确？