使用 LESS css 悬停颜色不变

Question

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

Jade 代码（.icon-photos 将有初始背景图片）

.icon-photos
div.icon-text
   | Photos

更少的代码

.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 以使用相邻兄弟 (+) 或一般兄弟 (~) 选择器。

On hover color not changing using LESS css