css - 悬停颜色不使用 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 以使用相邻兄弟 (+) 或一般兄弟 (~) 选择器。