javascript - 在 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; 是在隐藏容器的子项之前指定的，它将保持相关的 flex 元素可见并扩展到 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>