鼠标悬停class为card的元素时显示box元素，CSS代码无效求排查

你用的 + 是相邻兄弟选择器，它只能匹配紧跟在 .card 后面的直接下一个兄弟元素。如果你的 .box 不是 .card 的直接相邻兄弟（比如中间隔了别的元素，或者 .box 是 .card 的子元素/父容器里的其他子元素），这个选择器就不会生效。

对应解决办法： #

根据你的HTML结构选对应的方案：

• 如果.box是.card的直接下一个兄弟：检查有没有其他CSS规则覆盖了.box的display属性，可通过浏览器开发者工具(F12)查看hover状态下.box的样式是否被正确应用。
• 如果.box在.card后面但不相邻：把+换成通用兄弟选择器~，它能匹配.card之后所有同层级的.box：

  .card:hover ~ .box {
    display: inline-block;
    /* 你的其他样式 */
  }
  

• 如果.box是.card的子元素：直接用后代选择器：

  .card:hover .box {
    display: inline-block;
    /* 你的其他样式 */
  }
  

• 如果.box和.card同属一个父容器：也可以通过父容器的hover来触发：

  .parent-container:hover .box {
    display: inline-block;
    /* 你的其他样式 */
  }
  

额外提示：给.box的父元素添加position: relative，避免绝对定位的.box相对于整个页面定位出现偏移问题。

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