3

我无法在所需位置将 &:hover 添加到我的 SCSS 代码中。

基本上我有一个非常简单的菜单，每个 LI 都有一个类。基本上，我编写的以下代码将正确地为每个类分配所需的样式，尽管我只希望这只是一个悬停事件。

这是代码

$menu-style: black #000, blue #6699ff;

.top-bar-section {
    @each $menu-color in $menu-style {
        ul li .#{nth($menu-color, 1)} {
            border-top:5px solid nth($menu-color, 2);
        }
    }
}

这是处理成 CSS 时生成的内容

.top-bar-section ul li .black {
  border-top: 5px solid black;
}

.top-bar-section ul li .blue {
  border-top: 5px solid #6699ff;
}

这是我想要的结果，我需要完成

.top-bar-section ul li.black:hover, .top-bar-section ul li.black.active {
  border-top: 5px solid #333;
}

etc....

看到问题了吗？=[ 。当我添加 &:hover 时，它向我尖叫，必须在复合选择器的开头声明它......

有任何想法吗？

4

1 回答 1

3

我不确定您要在哪里添加:hover，但它似乎对我有用。

$menu-style: black #000, blue #6699ff;

.top-bar-section {
    @each $menu-color in $menu-style {
        ul li.#{nth($menu-color, 1)}:hover {
            border-top:5px solid nth($menu-color, 2);
        }
    }
}

输出：

.top-bar-section ul li.black:hover {
  border-top: 5px solid black;
}

.top-bar-section ul li.blue:hover {
  border-top: 5px solid #6699ff;
}
于 2013-04-20T11:55:41.123 回答