将鼠标悬停在父背景图像上时更改子颜色答案

【问题标题】：Change child color on hover over parent background image将鼠标悬停在父背景图像上时更改子颜色
【发布时间】：2014-07-24 00:22:07
【问题描述】：

我创建了一个带有背景图片的锚链接。我还有一个span 标签，其中也包含一些文本。我的预期效果是当用户将鼠标悬停在整个图像上时，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;}
 }
}

我觉得我很接近，但我不确定我在哪里被挂断了。

【问题讨论】：

标签： html css sass anchor

【解决方案1】：

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

【讨论】：

他不希望悬停在文本上触发，而是在背景图像上触发。这并没有解决问题。
我不同意。他或她非常明确地说：“我的预期效果是当用户将鼠标悬停在整个图像上时，跨度标记的颜色会发生变化”
@Jonline 它会吗？触发器是锚标记 (a.photos:hover)，span 是修改了颜色的内容。
是的。错过了包含跨度选择器。我的坏事——一杯浓缩咖啡太多了。 :#|
这行得通。只需要弄清楚如何添加悬停过渡。

【解决方案2】：

在 SASS 中：

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

【讨论】：

【解决方案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;}
}

【讨论】：