CSS le a class ı hover olduğunda b class ı değiştirme

Merhabalar

"blogbadge" class ı hover olduğunda "blogtext" class ında renk kırmızı olurken "footermenutitle" class ında renk mavi olsun istiyorum
jquery kullanmadan class la nasıl yapılıyor tam mantığını çözemedim.

normalde aşağıdaki mantıkla olması lazım

.blogbadge:hover + .blogtext {color:red; }
.blogbadge:hover + .footermenutitle {color:blue; }

ama olmuyor =) sanırım secicileri net belirmek gerekiyor

<a href="#" class="blogbadge" style="text-decoration: none;">
<div class="w-100 d-flex flex-row">
<div style="position: relative; width:310px;height:175px;background: url('success.jpg') no-repeat;background-size: cover;background-position: center;">
<div class="d-flex flex-column justify-content-center align-items-center" style="top:10px; left:-5px;position: absolute;width: 45px; height: 45px; background-color: #FFF;color: #11abba;    border: 2px solid #11ABBA; ">
    <span style="font-size:16px;line-height: .85;font-weight: bolder;white-space: nowrap;pointer-events: none;cursor: pointer;">16</span>
    <span style="font-size: .7em;;line-height: 1;font-weight: bolder;white-space: nowrap;pointer-events: none;cursor: pointer;">Jul</span>
</div>

</div>
<div class="d-flex flex-column" style="width:480px;padding:20px">
<p class="footermenutitle" style="color:#555;font-size:16px;">text</p>
<div class="blog-divider pdivider"></div>
<p class="blogtext" style="text-align: left;font-size:14px;color:#777;">text</p>
</div>    
</div>
</a