CSS悬停以影响另一个容器（引导卡）中的元素

当我将图像悬停在卡片主体类容器中时，我试图更改标题和文本的颜色。。。 对于使用+或~选择器的其他元素，我已经查看了许多类似的悬停影响示例。我的主要问题是，因为我想要更改的元素在父容器之外，除非我将它们放在同一个容器下，否则我似乎无法让它工作。如果您能告诉我如何在不使用JavaScript的情况下实现这一点，我将不胜感激

。卡头{
位置：相对位置；
溢出：隐藏；
} 
.卡img{
对象匹配：覆盖；
变换：变换0.5s三次贝塞尔（0.175,0.885,0.32,1.275）；
}
.卡img：悬停{
转换：比例（1.1）；
}
.卡头img：悬停+卡体h5{
颜色：var（--第二颜色）；
}
/*我被困在这里了*/
.卡头img：悬停+卡体h5{
颜色：紫色；
}

标题
说明

我的解决方案：

• 从

  卡头

  中移除填充，并将其重新应用于

  img

  。现在，如果您将鼠标悬停在

  卡头的任何部分上，您也将鼠标悬停在
  img上

• 从

  卡头应用相邻同级
  CSS

。卡头{
位置：相对位置；
溢出：隐藏；
} 
.卡img{
对象匹配：覆盖；
变换：变换0.5s三次贝塞尔（0.175,0.885,0.32,1.275）；
}
.卡img：悬停{
转换：比例（1.1）；
}
.卡头img：悬停+卡体h5{
颜色：var（--第二颜色）；
}
/*我被困在这里了*/
.卡头img：悬停+卡体h5{
颜色：紫色；
}
.卡头{
填充：0！重要；
}
.卡头img{
填充：.75雷姆1.25雷姆；
}
.卡片标题：悬停+卡片主体.卡片标题，
.卡头：悬停+卡体.引线{
颜色：红色；
}

标题
说明

选择器选择选定元素之后的元素。要实现这一点，您的选择器应该是：

.card-header:hover + .card-body h5

纯css中不可能使用用于悬停在图像上并更改h5样式的选择器

以下是优化后的代码：

。卡头{
位置：相对位置；
溢出：隐藏；
} 
.卡img{
对象匹配：覆盖；
变换：变换0.5s三次贝塞尔（0.175,0.885,0.32,1.275）；
}
.卡img：悬停{
转换：比例（1.1）；
}
.卡头img：悬停+卡体h5{
颜色：var（--第二颜色）；
}
/*我被困在这里了*/
.卡头：悬停+卡体h5{
颜色：紫色；
}

标题
说明

但是这会改变文本颜色，即使

img

没有直接悬停（例如图像周围的边缘）。感谢您的尝试！我知道你对“+”选择器有更好的理解。谢谢你的精彩技巧和解决方案！这些填充值是从bootstrap来的还是你自己编的？@YongJunJung这些填充值来自bootstrap。我通过查看浏览器开发工具中的代码示例找到了它们。