使用LESS css时悬停颜色不变

Question

当我在图像上盘旋时，我正在尝试更改文本和背景图像的颜色。我正在使用LESS，我可以更改背景图像，但文本的颜色不会改变。请帮忙。这是我的代码片段： -

玉码（.icon-photos将有一张初始背景图片）

.icon-photos
div.icon-text
   | Photos

LESS代码

.icons-holder .icon-photos:hover {
background: url('/assets/img/timeline/audio.png');
.icon-text {
    color: green;
 }
}

Answer 1

您正在使用的选择器（或）您的Jade标记对于您拥有的Jade标记是错误的。

问题中提供的当前标记为

.icon-photos
div.icon-text
   | Photos

并且在编译时会生成以下HTML输出：

<div class="icon-photos"></div>
<div class="icon-text">Photos</div>

请注意.icon-text不是.icon-photos的孩子，因此CSS规则不会被应用。对于您使用的选择器，Jade代码应如下所示：

.icon-photos
  div.icon-text
   | Photos

请注意第二行开头的标签，表示它是一个孩子。这将编译如下，因此可以使用您的选择器。

<div class="icon-photos">
  <div class="icon-text">Photos</div>
</div>

如果您的标记符合您的预期，那么您应该修改CSS以使用相邻的兄弟（+）或一般兄弟（~）选择器。