CSS hover触发box元素显示隐藏.info-sec div失效问题求助

你使用的CSS相邻兄弟选择器+仅能匹配同一父元素下、紧跟在第一个元素后的相邻同级元素。你的代码中.box属于.info-container内部的嵌套子元素，而.info-sec是.info-container的同级相邻元素，二者层级不匹配，所以.box:hover + .info-sec这个选择器无法命中任何元素，自然不会生效。
而你修改为.info-container:hover + .info-sec可以正常生效，正是因为.info-container和.info-sec符合同级相邻的匹配规则。

方案1：现代浏览器纯CSS实现 #

如果不需要兼容过旧的浏览器，可以使用CSS:has()选择器实现hover任意box触发显示：

.info-sec{
  visibility:hidden;
}
/* 匹配内部存在box被hover的.info-container，再选中其后相邻的.info-sec */
.info-container:has(.box1:hover) + .info-sec,
.info-container:has(.box2:hover) + .info-sec,
.info-container:has(.box:hover) + .info-sec {
  visibility:visible;
}

方案2：全兼容JS实现 #

如果需要兼容不支持:has()的低版本浏览器，可以用JavaScript监听hover事件控制显示状态：

const boxes = document.querySelectorAll('.box1, .box2, .box')
const infoSec = document.querySelector('.info-sec')

boxes.forEach(box => {
  box.addEventListener('mouseenter', () => infoSec.style.visibility = 'visible')
  box.addEventListener('mouseleave', () => infoSec.style.visibility = 'hidden')
})

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