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;}
}

在父母背景图像上悬停时更改子颜色

3 个答案: