在 CSS 中悬停时隐藏兄弟 div

Question

我正在尝试创建一个 CSS 网格（或 flex），其中每个项目在悬停时展开，而其他项目被隐藏。我可以使用 :nthchild 让第一个项目以这种方式工作，但显然这个 nthchild 不适用于网格中的先前项目。

<div class="container">

<div id="a" class="box">Div A Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div id="b" class="box">Div B</div>
<div id="c" class="box">Div C</div>


</div>

CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  margin: 20px;
}
 
.box {
   background-color: grey;
   padding: 20px;
}
  
#a:hover {
     grid-column: 1 / 4;
}
 
#a:hover ~ :nth-child(-n+8) {
  display: none;
}

#b:hover {
     grid-column: 1 / 4;
}
 
#b:hover ~ :nth-child(-n+8) {
  display: none;
}

这是 jsfiddle 上的代码： https://jsfiddle.net/ktz8qdcp/20/

感谢您的帮助！

Answer 1

我相信在这种情况下使用!important 是合理的。由于display: block!important;是在隐藏容器的子项之前指定的，它将保持相关的弹性项目可见并扩大到100%。

我使用背景颜色来展示 100% 的宽度。请注意，CSS 定义的顺序在这里很重要。

.container {
  display: flex;
}

.container>.box {
  width: calc( 100% / 3);
}

#a {
  background: lightblue;
}

#b {
  background: lightgray;
}

#c {
  background: lightgreen;
}

#a:hover,
#b:hover,
#c:hover {
  display: block!important;
  width: 100%;
}

.container:hover>.box {
  display: none;
}

<div class="container">
  <div id="a" class="box">Div A Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
    took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  <div id="b" class="box">Div B</div>
  <div id="c" class="box">Div C</div>
</div>

Answer 2

知道无法悬停隐藏元素...我建议改为使用不透明度。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  margin: 20px;
}

.box {
  background-color: grey;
  padding: 20px;
  opacity: 0;
  transition: opacity 1s;
}

.box:hover{
  opacity: 1;
}

<div class="container">

  <div id="a" class="box">Div A Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
    took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  <div id="b" class="box">Div B</div>
  <div id="c" class="box">Div C</div>


</div>