html – 当我将鼠标悬停在它们上面时,为什么只有一些我的CSS网格框在扩展？

概述我是CSS的网格新手,但我想尝试一下.我有一个3×3盒子的网格.当我将鼠标悬停在一个盒子上时,它应该应该排出整行…但是这不起作用. 当我将鼠标悬停在1以上时,它会完全填满屏幕,当我将鼠标悬停在3以上时,我的屏幕开始闪烁并且无法正常工作. .container { display: grid; grid-gap: 10px; grid-template-columns: repeat(3 我是CSS的网格新手,但我想尝试一下.我有一个3×3盒子的网格.当我将鼠标悬停在一个盒子上时,它应该应该排出整行…但是这不起作用.

当我将鼠标悬停在1以上时,它会完全填满屏幕,当我将鼠标悬停在3以上时,我的屏幕开始闪烁并且无法正常工作.

.container {  display: grID;  grID-gap: 10px;  grID-template-columns: repeat(3,minmax(100px,auto));  grID-template-rows: repeat(3,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 >  <div >1</div>  <div >2</div>  <div >3</div>  <div >4</div>  <div >5</div>  <div >6</div>  <div >7</div>  <div >8</div>  <div >9</div></div>

解决方法 这是一个想法,你可以依靠负边距来创建重叠效果,而无需改变结构和使用display：contents

.container {  display: grID;  grID-gap: 10px;  grID-template-columns: repeat(3,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,.3),rgba(40,.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,1fr);  }}

<div >  <div >1</div>  <div >2</div>  <div >3</div>  <div >4</div>  <div >5</div>  <div >6</div>  <div >7</div>  <div >8</div>  <div >9</div></div>

总结

以上是内存溢出为你收集整理的html – 当我将鼠标悬停在它们上面时,为什么只有一些我的CSS网格框在扩展？全部内容，希望文章能够帮你解决html – 当我将鼠标悬停在它们上面时,为什么只有一些我的CSS网格框在扩展？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。