Sass 悬停时简单的CSS更改元素

这很简单，但即使在看了这么多的例子后，我似乎也不能正确地理解它！如你所见，我有一个形象！现在，当我将鼠标悬停在图像上时，我想用class.headline.text.title.subtitle对元素执行各种操作。由于某些原因，我只能影响.title类的任何更改！我做错了什么

我的html：

正文{
}
.集装箱{
.标题{
颜色：红色；
}
福托先生{
背景颜色：浅蓝色；
光标：指针；
}
.foto:悬停+标题{
颜色：绿色；
}
.foto:悬停+标题{
颜色：栗色；
位置：绝对位置；
顶部：3em；
左：10em；
}
//文本不起作用
.foto:悬停+.text{
颜色：栗色；
}
.头衔{
颜色：深绿色；
字体大小：粗体；
p{
字号：2em；
}
}
.文本{
颜色：蓝色；
}
.副标题{
颜色：深色；
}
}

索德劳斯特伦根
印地安岛

勒宁·维尔·英迪恩·凯宁

文本的作者是奥本

元素+元素适用于您在第一个元素之后识别的下一个直接元素。它不会在DOM中搜索元素

例如

.foo+.bar {color:#f00}

<div class="foo"></div>
<div class="bar"></div> --- This gets selected

<div class="foo"></div>
<div class="zanza"</div>
<div class="bar"></div> --- This does not

或者，为了避免堆叠太多选择器，您可以使用

~

在DOM中的同一级别选择同级元素：

.foto:hover ~ .title {...}
.foto:hover ~ .text {...}
.foto:hover ~ .subtitle {...}

请记住，您的HTML是从上到下读取的，您无法使用CSS将以前的同级元素作为目标。因此，现在，按照HTML的结构方式，您无法基于图像

：hover

选择

.headline

元素，因为

.headline

首先出现

.foto:hover ~ .title {...}
.foto:hover ~ .text {...}
.foto:hover ~ .subtitle {...}