在父母背景圖像上懸停時更改子顏色

Question

我創建了一個帶有背景圖像的錨鏈接。 我還有一個包含一些文本的span標記。 我的預期效果是當用戶將鼠標懸停在整個圖像上而不僅僅是跨度標記（位於背景圖像的中間）時，span標記的顏色會發生變化。

這是我的HTML：

<a class="photos" href="link/to/folder">
  <span>Event Photos</span>
</a>

這是我的SCSS：

.photos {display: block;
background: url('imgs/photos-bg.jpg') no-repeat center center; 
background-size:cover;
height: auto; 
padding-top: 11%; 
padding-bottom: 14%;
@include transition(all .3s ease-in-out);
 span {width: 20%;
 margin: 0 auto;
 background: $drkgrey;
 text-align: center; 
 @include sansproxlgt(em(28)); 
 color: $white; 
 padding:1% 1%; 
 display: block;
   &:hover{color: $blue;}
 }
}

我覺得我很親密，但我不知道我在哪里掛了。

Answer 1

a.photos:hover span {color: #color;}

Answer 2

在SASS：

&hover: {
     span { color:$blue;}
}

Answer 3

對於任何想要了解這一點的人來說，這是我的最終SCSS。 感謝Jonline和Gray Spectrum的見解！

a.photos {
 display: block;
 background: url('imgs/photos-bg.jpg') no-repeat center center; 
 background-size:cover;
 height: auto; 
 padding: 14% 0;
  span {
   width: 20%; 
   margin: 0 auto; 
   background: $drkgrey; 
   text-align: center; 
   @include sansproxlgt(em(28)); 
   color: $white; 
   padding:1% 1%; 
   display: block; 
   @include transition(all .3s ease-in-out);
     @media screen and (max-width: 36.5em ) {
      width: 30%;}
  }
  &:hover span {color: $blue;}
}