Question

我有一个有3列的网格布局，当我悬停时，我希望第一列消失。我试过这样，但每次只剪切最后一个（点击整页查看问题）：

#main {
  margin: 1em;
  display: grid;
  grid-column-gap: 1em;
  grid-template-columns: minmax(100px, 200px) minmax(200px, 400px) auto;
  grid-template-areas: "search results info";
}

#main:hover {
  grid-template-columns: minmax(200px, 400px) auto;
  grid-template-areas: "results info"
}

#search {
  grid-area: "search";
  background-color: lightcoral;
  height: 100px;
}

#results {
  grid-area: "results";
  background-color: lightgreen;
}

#info {
  grid-area: "info";
  background-color: lightblue;
}

<body>
  <section id="main">
    <section id="search">
    </section>
    <section id="results">
    </section>
    <section id="info">
    </section>
  </section>
</body>

Answer 1

在悬停时设置display:none以获取不需要的内容，您可以摆脱grid-template-areas：

＆＃13;

#main {
  margin: 1em;
  display: grid;
  grid-column-gap: 1em;
  grid-template-columns: minmax(100px, 200px) minmax(200px, 400px) auto;
  min-height: 200px;
}

#main:hover {
  grid-template-columns: minmax(200px, 400px) auto;
}

#main:hover #search {
  display: none;
}

#search {
  background-color: lightcoral;
}

#results {
  background-color: lightgreen;
}

#info {
  background-color: lightblue;
}

＆＃13;

<section id="main">
  <section id="search">
  </section>
  <section id="results">
  </section>
  <section id="info">
    content
  </section>
</section>

＆＃13;

在悬停时使网格列消失

1 个答案: