如何为可展开网格Div实现hover模糊并显示提示文本？

我有一个3列的Grid布局，点击其中的div会展开并占据整行，再次点击可收起；打开新div时会关闭其他已展开的div，确保同一时间仅一个处于展开状态。现在想实现鼠标hover该div时，div呈现模糊效果并在中间显示“Click for more info”，但不想为每个div重复添加文本容器，求更简便的实现方法。

现有代码 #

JavaScript #

document.querySelectorAll('#gridALBUM > div').forEach((D,_,A)=>
  {
  D.addEventListener('click', e=>
    {
    if (D.classList.toggle('span'))
      A.forEach(d =>{ if(d!=D) d.classList.remove('span') });
    })
  })

CSS #

#gridALBUM {
  margin: 50px auto;
  max-width: 908px;
  display: grid;
  grid-gap: 0 4px;
  grid-template-columns: repeat(3, 300px);
  grid-auto-flow: dense;
  background-color: lightblue;
}

#gridALBUM > div {
  border  : 1px solid black;
  display : flex;
}

#gridALBUM > div:not(.span) > div {
  display : none; 
 }

#gridALBUM > div.span {
  grid-column      : 1 / 4;
  background-color : #47479c;
}

HTML #

<div id="gridALBUM">
  <div id="one"   ><h1>1</h1> <div><h2> one   </h2></div></div>
  <div id="two"   ><h1>2</h1> <div><h2> two   </h2></div></div> 
  <div id="three" ><h1>3</h1> <div><h2> three </h2></div></div>
  <div id="four"  ><h1>4</h1> <div><h2> four  </h2></div></div>
  <div id="five"  ><h1>5</h1> <div><h2> five  </h2></div></div>
  <div id="six"   ><h1>6</h1> <div><h2> six   </h2></div></div>
  <div id="seven" ><h1>7</h1> <div><h2> seven </h2></div></div>
  <div id="eight" ><h1>8</h1> <div><h2> eight </h2></div></div>
  <div id="nine"  ><h1>9</h1> <div><h2> nine  </h2></div></div>
  <div id="ten"   ><h1>10</h1><div><h2> ten   </h2></div></div>
</div>

利用CSS伪元素::before就能实现需求，无需新增任何HTML容器，只需修改CSS代码：

修改后的CSS #

#gridALBUM {
  margin: 50px auto;
  max-width: 908px;
  display: grid;
  grid-gap: 0 4px;
  grid-template-columns: repeat(3, 300px);
  grid-auto-flow: dense;
  background-color: lightblue;
}

#gridALBUM > div {
  border  : 1px solid black;
  display : flex;
  position: relative; /* 为伪元素提供定位基准 */
  justify-content: center;
  align-items: center;
  min-height: 100px; /* 保证hover效果显示正常 */
}

/* 非展开状态下hover时内容模糊 */
#gridALBUM > div:not(.span):hover > h1 {
  filter: blur(3px);
}

/* 默认隐藏伪元素提示 */
#gridALBUM > div:not(.span)::before {
  content: '';
  position: absolute;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* hover时显示提示文本 */
#gridALBUM > div:not(.span):hover::before {
  content: 'Click for more info';
  opacity: 1;
  z-index: 1;
  color: #fff;
  font-size: 1.2rem;
  text-shadow: 0 0 3px #000;
}

#gridALBUM > div:not(.span) > div {
  display : none; 
 }

#gridALBUM > div.span {
  grid-column      : 1 / 4;
  background-color : #47479c;
}

/* 展开状态下隐藏hover提示 */
#gridALBUM > div.span::before {
  display: none;
}

说明 #

• 通过position: relative给每个grid项设置定位基准，让伪元素能居中显示
• hover时给h1添加模糊滤镜，实现内容模糊效果
• 利用::before伪元素动态生成提示文本，通过透明度过渡控制显示/隐藏，提升交互体验
• 给展开状态的.span类隐藏伪元素，避免展开后仍显示hover提示

内容的提问来源于stack exchange，提问作者kay