Css 模仿同级元素的问题'；s对其他兄弟姐妹的影响

我想模仿我在#boxLeft上的效果和输出，但当我这样做并添加css3转换时，它失败了。我不得不用-100px的边距上限值来隐藏它。有人能帮忙吗

HTML和CSS：

正文{
填充：0；
保证金：0；
}
p、 h1、h2、h3、h4、h5、h6{
填充：0；
保证金：0；
}
#盒子{
宽度：100%；
高度：100px；
背景色：#636363；
}
boxLeft先生，
boxRight先生{
宽度：50%；
高度：100px；
/*显示：内联块*/
浮动：左；
填充：10px；
框大小：边框框；
z指数：1；
溢出：隐藏；
}
Boxlight先生{
背景色：红色；
}
.blHeader{
文本对齐：右对齐；
}
.boxLeft:悬停{
背景颜色：橙色；
宽度：100%；
过渡：.5s；
}
.boxLeft:悬停~.boxRight{
显示：无；
}
.boxLeft:hover>.blHeader{
文本对齐：左对齐；
}
.boxLeft:hover>.blCon{
显示：块；
}
B.blCon先生，
布尔肯先生{
显示：无；
}
boxRight先生{
背景颜色：蓝色；
}
.boxRight:悬停{
背景颜色：绿色；
宽度：100%；
过渡：.5s；
利润上限：-100px；
}
.boxRight:悬停~.boxLeft{
显示：无；
}
.boxRight:hover>.brHeader{
文本对齐：左对齐；
}
.boxRight:hover>.brCon{
显示：块；
过渡：.5s；
}

左标题
左图内容是一位精英。暂时性共济会动物行为的复发性过失。《通俗易懂的大词典》是一本关于时间紧迫性的著作，
卡姆克共和国
右标题
正确的内容包括：知识产权、权利和义务。暂时性共济会动物行为的复发性过失。《通俗易懂的大词典》是一本关于时间紧迫性的著作，
卡姆克共和国

选择器

.boxRight:hover~.boxLeft

未按预期工作，因为常规同级组合器

~

仅选择以下同级元素。由于元素

.boxLeft

位于元素

.boxRight

之前，因此将鼠标悬停在元素

.boxRight

上时，不会选择任何内容，并且元素

.boxLeft

不会隐藏

要解决这个问题，一个选项是将鼠标悬停在父

#box

元素上时隐藏第一个元素

#box:hover .boxLeft {
  display: none;
}

然后，您可以在实际将鼠标悬停在第一个元素上时覆盖此选项：

#box .boxLeft:hover {
  display: block;
}

这是因为只有两个元素。如果您没有将鼠标悬停在第一个元素上，则可以假定您将鼠标悬停在第二个元素上（这意味着您可以模仿一般同级组合符，因为您可以在将鼠标悬停在父元素上时设置第一个元素的样式）

更新的代码段：

正文{
填充：0；
保证金：0；
}
p、 h1、h2、h3、h4、h5、h6{
填充：0；
保证金：0；
}
#盒子{
宽度：100%；
高度：100px；
背景色：#636363；
}
boxLeft先生，
boxRight先生{
宽度：50%；
高度：100px；
/*显示：内联块*/
浮动：左；
填充：10px；
框大小：边框框；
z指数：1；
溢出：隐藏；
}
Boxlight先生{
背景色：红色；
}
.blHeader{
文本对齐：右对齐；
}
.boxLeft:悬停{
背景颜色：橙色；
宽度：100%；
过渡：.5s；
}
.boxLeft:悬停~.boxRight{
显示：无；
}
.boxLeft:hover>.blHeader{
文本对齐：左对齐；
}
.boxLeft:hover>.blCon{
显示：块；
}
B.blCon先生，
布尔肯先生{
显示：无；
}
boxRight先生{
背景颜色：蓝色；
浮动：对；
}
.boxRight:悬停{
背景颜色：绿色；
宽度：100%；
过渡：.5s；
}
#框：悬停。框左{
显示：无；
}
#框。框左：悬停{
显示：块；
}
.boxRight:hover>.brHeader{
文本对齐：左对齐；
}
.boxRight:hover>.brCon{
显示：块；
过渡：.5s；
}

左标题
左图内容是一位精英。暂时性共济会动物行为的复发性过失。《通俗易懂的大词典》是一本关于时间紧迫性的著作，
卡姆克共和国
右标题
正确的内容包括：知识产权、权利和义务。暂时性共济会动物行为的复发性过失。《通俗易懂的大词典》是一本关于时间紧迫性的著作，
卡姆克共和国

Josh，感谢您的澄清，我不知道关于兄弟组合器的规则。顺便说一句，当你说“一个更灵活的选择”时，真的帮了大忙，你能再详细解释一下吗？再次感谢！