Change background when hovering over another item

HTML & CSS
1

What I’d like to do is change the background color of .Text when I hover over the image in this html

<div class=“TextOver”>

     &lt;a  href="#"&gt; &lt;img src="http://localhost/CocosCakes/wp-content/themes/cocoscakes/images/Strawberry_Cupcake.png"  /&gt;&lt;/a&gt;
    
    &lt;span&gt;&lt;a href="#" class="Text"&gt; View Cupcakes &lt;/a&gt;&lt;/span&gt;
    
    &lt;/div&gt;

This default CSS for the inactive state

.Text {
position:absolute;
top:0em;
left:0em;
width:100%;
text-align:center;
z-index:50;
background: rgb(0, 0, 0); /* fallback color */
background: rgba($Highlight, 0.7);
padding:1em 0em;
margin:1px 1px 0px 1px;
font-size:1.5em;

}

I’ve tried this CSS and a couple of other things, but can’t get it to work. I feel like I’m really close.

.TextOver img:hover span a .Text{
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0,0,0, 0.7);

}

Thanks!

2

Try this:

.TextOver > a:hover + span a {
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(0,0,0, 0.7);
}
3

Thanks that worked perfect!