本文介绍了将鼠标悬停在它们上方时,为什么只有某些CSS Grid框会扩展?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是CSS网格的新手,但我想尝试一下。我有一个3x3框的网格。当我将鼠标悬停在一个框上时,它应该位于完整的行中……但是那不起作用。
I'm new to grids in CSS but I want to give it a try. I have a grid with 3x3 boxes. When I hover over a box it should should out the complete row... but that's not working.
当我将鼠标悬停在 1
上时,它将完全填满屏幕,而当我将鼠标悬停在 3 我的屏幕开始闪烁并且不起作用。
When I hover over 1
it fills out the screen completely, and when I hover over 3
my screen starts to blink and it's not working.
.container {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, minmax(100px, auto));
grid-template-rows: repeat(3, minmax(100px, auto));
}
[class^="item"] {
text-align: center;
box-sizing: border-box;
padding: 10%;
font-size: 5em;
color: #0580d5;
transition: .2s;
}
[class^="item"]:hover {
grid-column-start: 1;
grid-column-end: 4;
}
.item-1 {
/*grid-area: 1 / 2 / span 2 / span 2;*/
}
.container>div {
border: 2px solid #0580d5;
background-color: rgba(40, 180, 240, .3);
border-radius: 5px;
}
@media only screen and (min-width: 789px) {
.container {
grid-template-columns: repeat(3, 1fr);
}
}
<div class="container">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
<div class="item-7">7</div>
<div class="item-8">8</div>
<div class="item-9">9</div>
</div>
推荐答案
在这里,您可以依靠负边距来创建重叠效果,而无需更改结构并使用 display:contents
Here is an idea where you can rely on negative margin to create the overlap effect whithout changing the structure and using display:contents
.container {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, minmax(100px, auto));
grid-template-rows: repeat(3, minmax(100px, auto));
}
[class^="item"] {
text-align: center;
box-sizing: border-box;
padding: 10%;
font-size: 5em;
color: #0580d5;
transition: .2s;
}
[class^="item"]:hover {
z-index:2; /*we increase the z-index to cover the other*/
background:
/*we this to keep the initial background*/
linear-gradient(rgba(40, 180, 240, .3),rgba(40, 180, 240, .3)),
#fff;
}
[class^="item"]:nth-child(3n + 1):hover {
margin-right:calc(-200% - 20px); /* we remove (2 x grid items + 2 x gap) */
}
[class^="item"]:nth-child(3n + 2):hover {
margin-left:calc(-100% - 10px);
margin-right:calc(-100% - 10px);
}
[class^="item"]:nth-child(3n + 3):hover {
margin-left:calc(-200% - 20px);
}
.container>div {
border: 2px solid #0580d5;
background-color: rgba(40, 180, 240, .3);
border-radius: 5px;
}
@media only screen and (min-width: 789px) {
.container {
grid-template-columns: repeat(3, 1fr);
}
}
<div class="container">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
<div class="item-7">7</div>
<div class="item-8">8</div>
<div class="item-9">9</div>
</div>
这篇关于将鼠标悬停在它们上方时,为什么只有某些CSS Grid框会扩展?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!